groupZone

Montre le regroupement comme une bande de puces au-dessus des lignes, que l’utilisateur peut changer.

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

Options	Type
use (obligatoire)	{ /** The grouping the chips show and change. */ readonly grouping: { api(grid: Grid): GroupingApiLike | null }; /** Moving columns (`columns()`): a header dragged onto the band groups by it. Absent: no drop (the menu and the keys still work). */ readonly columns?: { api(grid: Grid): { readonly dropTargets: { add(el: Element, t: { accept(column: string): boolean; drop(column: string): void; readonly label?: string }): () => void } } | null } }
texts	'pivot'

Ce qu’elle fait

groupZone({ use }) ajoute une bande au-dessus des lignes. Vide, elle dit « Glissez une colonne ici pour regrouper ». Chaque colonne de regroupement y est une puce avec son nom et un bouton ×, dans l’ordre du regroupement. Un titre glissé sur la bande regroupe par sa colonne ; × ou Suppr en retire une ; Ctrl+Maj+← → ou un glisser à la souris en déplace une ; chaque changement est annoncé. La bande est un seul arrêt de tabulation : les flèches passent d’un élément à l’autre, en miroir en arabe.

Elle pilote le grouping() donné dans use.grouping, par son API ; cette fonction doit aussi être dans la grille. Le dépôt d’un titre demande columns() dans use.columns : sans lui, pas de dépôt, mais « Regrouper par cette colonne » dans le menu de colonne et les touches marchent toujours. Une colonne avec groupable: false ne se dépose pas et n’a pas de puce. Une colonne déposée reste visible.

Ses textes (le paquet -group) sont obligatoires : une erreur nomme chaque clé manquante. À côté d’un tableau croisé, prenez plutôt pivotBar().

Options

• use (obligatoire) : grouping, la fonction dont la bande montre et change les colonnes ; columns, facultatif, le déplacement des colonnes qui permet de déposer un titre dessus.
• texts : 'pivot' lit les textes du tableau croisé (pivot.label, pivot.empty…) au lieu de zone.*, pour une seconde bande qui tient les colonnes du tableau croisé.

Lues à la création de la grille.

Exemple

import { createGrid, type GridMessages } from '@dzgrid/dom';
import { grouping } from '@dzgrid/dom/grouping';
import { groupZone } from '@dzgrid/dom/group-zone';
import { columns } from '@dzgrid/dom/columns';
import { FR } from '@dzgrid/dom/locales/fr';
import { FR_GROUP } from '@dzgrid/dom/locales/fr-group';
import { FR_COLUMNS } from '@dzgrid/dom/locales/fr-columns';
import '@dzgrid/theme/grouping.css';
import '@dzgrid/theme/columns.css';

type Packet = { id: string; kind: string; colour: string; name: string; packets: number };

const messages: GridMessages = { ...FR, text: { ...FR.text, ...FR_GROUP.text, ...FR_COLUMNS.text } };
const groups = grouping({ by: ['kind'] });
const moves = columns();

createGrid<Packet>(document.getElementById('packets')!, {
  rows: [{ id: 'p1', kind: 'Aromatique', colour: 'Vert', name: 'Basilic', packets: 40 }],
  columns: [
    { id: 'kind', header: 'Type' },
    { id: 'colour', header: 'Couleur' },
    { id: 'name', header: 'Graine', groupable: false },
    { id: 'packets', header: 'Sachets', type: 'number', aggFunc: 'sum' },
  ],
  getRowId: (p) => p.id,
  messages,
  features: [moves, groups, groupZone({ use: { grouping: groups, columns: moves } })],
});

Démo

Glissez le titre Couleur dans la bande au-dessus des titres ; × sur une puce la retire.

Voir aussi

• grouping() : le regroupement qu’elle montre.
• L’option de colonne groupable.
• Le guide Groupes.