pivotBar

Dessine une barre au-dessus des lignes où l’utilisateur construit le tableau croisé.

Import	import { pivotBar } from '@dzgrid/dom/pivot-bar';
Signature	pivotBar(o: PivotBarOptions): GridFeature
Textes	import { FR_PIVOT_BAR } from '@dzgrid/dom/locales/fr-pivot-bar'; langues : en, fr, ar
Feuille de style	import '@dzgrid/theme/pivot.css';
CSS à part	PIVOT_BAR_CSS — à ajouter soi-même avec injectStyles: false
Déclarée dans	packages/dom/src/pivot-bar/index.ts

Options	Type
use (obligatoire)	{ /** The row grouping (`grouping({ pivot })`): the « Lignes » part. */ readonly grouping: { api(grid: Grid): { by(): readonly string[]; setBy(by: readonly string[], o?: { readonly user?: boolean }): void } | null }; /** The pivot handed to that grouping: the « Colonnes » and « Valeurs » parts. */ readonly pivot: { api(grid: Grid): PivotApi | null }; /** Moving columns (`columns()`): a header dropped on a part adds its column there. */ readonly columns?: { api(grid: Grid): { readonly dropTargets: { add(el: Element, t: { accept(column: string): boolean; drop(column: string): void; readonly label?: string }): () => void } } | null } }
panel	boolean

Ce qu’elle fait

pivotBar({ use }) dessine une bande au-dessus des lignes avec trois parties nommées : « Lignes » (les colonnes de regroupement), « Colonnes » (les colonnes croisées) et « Valeurs ». Chaque partie est une barre d’outils de puces avec les touches et les déplacements de groupZone() : × ou Suppr retire, Ctrl+Maj+← → déplace dans la partie, « + » liste les colonnes que la partie accepte (le chemin sans glisser). Ctrl+Maj+↑ ↓, ou une puce déposée sur une autre partie, déplace une colonne vers la partie précédente ou suivante ; une partie qui la refuse le dit.

La puce d’une valeur, comme « somme(Recette) », ouvre un menu des fonctions qui conviennent à sa colonne. La puce d’une colonne croisée a un bouton d’ordre (↑ ou ↓) qui inverse ses colonnes créées. Avec columns() dans use.columns, un titre déposé sur une partie y ajoute sa colonne. Quand la barre fait 30 rem de large ou moins, les parties s’empilent. Avec columnsChooser(), le volet des colonnes commence par un interrupteur « Mode pivot » et les mêmes trois parties.

Il lui faut le grouping() et le pivot() donnés dans use. Ses textes viennent de trois paquets, -pivot-bar, -pivot et -group ; une erreur nomme chaque clé manquante. Prenez-la à la place de groupZone() à côté d’un tableau croisé.

Options

• use (obligatoire) : grouping, le regroupement des lignes (« Lignes ») ; pivot, le tableau croisé donné à ce regroupement (« Colonnes » et « Valeurs ») ; columns, facultatif, pour qu’un titre puisse être déposé sur une partie.
• panel : l’interrupteur « Mode pivot » et les trois parties en haut du volet des colonnes, avec columnsChooser(). Activé par défaut.

Lues à la création de la grille.

Exemple

import { createGrid, type GridMessages } from '@dzgrid/dom';
import type { ColumnOrGroup } from '@dzgrid/core';
import { grouping } from '@dzgrid/dom/grouping';
import { pivot } from '@dzgrid/dom/pivot';
import { pivotBar } from '@dzgrid/dom/pivot-bar';
import { spans } from '@dzgrid/dom/spans';
import { columns } from '@dzgrid/dom/columns';
import { FR } from '@dzgrid/dom/locales/fr';
import { FR_GROUP } from '@dzgrid/dom/locales/fr-group';
import { FR_PIVOT } from '@dzgrid/dom/locales/fr-pivot';
import { FR_PIVOT_BAR } from '@dzgrid/dom/locales/fr-pivot-bar';
import { FR_COLUMNS } from '@dzgrid/dom/locales/fr-columns';
import '@dzgrid/theme/grouping.css';
import '@dzgrid/theme/pivot.css';
import '@dzgrid/theme/columns.css';

type Sale = { id: string; shop: string; month: string; bread: string; loaves: number; takings: number };

const cols: ColumnOrGroup<Sale>[] = [
  { id: 'shop', header: 'Boulangerie' },
  { id: 'month', header: 'Mois' },
  { id: 'bread', header: 'Pain' },
  { id: 'loaves', header: 'Pains', type: 'number' },
  { id: 'takings', header: 'Recette', type: 'number', numberFormat: { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 } },
];
const messages: GridMessages = {
  ...FR,
  text: { ...FR.text, ...FR_GROUP.text, ...FR_PIVOT.text, ...FR_PIVOT_BAR.text, ...FR_COLUMNS.text },
};

const cross = pivot({ columns: ['month'], values: { takings: 'sum' } });
const rowsBy = grouping({ by: ['shop'], pivot: cross });
const moves = columns();
createGrid<Sale>(document.getElementById('bakeries')!, {
  rows: [{ id: 'b1', shop: 'Rue du Moulin', month: '2026-01', bread: 'Seigle', loaves: 120, takings: 360 }],
  columns: cols,
  getRowId: (s) => s.id,
  messages,
  features: [spans(), moves, rowsBy, pivotBar({ use: { grouping: rowsBy, pivot: cross, columns: moves }, panel: false })],
});

Démo

Dans la barre au-dessus de la grille, + sous Colonnes ajoute Pain comme seconde bande ; la puce d’une valeur change sa fonction.

Voir aussi

• pivot() : le tableau que la barre construit.
• groupZone() : la bande pour un regroupement seul.
• Le guide Tableau croisé.