groups

Ajoute le bouton qui ouvre et ferme un groupe de colonnes repliable.

Import	import { groups } from '@dzgrid/dom/groups';
Signature	groups(): GroupsFeature
Textes	pas de paquet à elle
CSS à part	GROUPS_CSS — à ajouter soi-même avec injectStyles: false
Déclarée dans	packages/dom/src/groups/index.ts

Ce qu’elle fait

Un groupe de colonnes avec collapsible: true reçoit un petit bouton dans son titre. Fermé, le groupe montre ses colonnes marquées groupShow: 'closed' ou sans marque ; ouvert, il montre ses colonnes marquées 'open' ou sans marque. Entrée ou Espace sur le titre du groupe qui a le focus fait comme le bouton, et le nouvel état est dit. open: false sur le groupe le fait commencer fermé. Une colonne que l’utilisateur a masquée le reste quand son groupe s’ouvre, et le choix des colonnes garde cochée une colonne repliée par son groupe.

Les lignes de groupes elles-mêmes sont dessinées par spans(), qu’il faut aussi. Un groupe fermé qui ne montrerait aucune colonne montre sa première, avec un avertissement invalid-column-group. Un repli qui ne laisserait aucune colonne à l’écran est refusé. L’état ouvert ou fermé de chaque groupe est gardé par gridState(), et « Réinitialiser les colonnes » du menu de colonne rend celui des définitions. Par le code : groupsFeature.api(grid) donne toggle, isOpen, reset, get et set.

Ses textes sont dans le paquet -columns. Avec un groupe repliable et sans eux, la grille n’est pas créée : une erreur nomme la clé qui manque.

Exemple

import { createGrid } from '@dzgrid/dom';
import type { ColumnOrGroup } from '@dzgrid/core';
import { spans } from '@dzgrid/dom/spans';
import { groups } from '@dzgrid/dom/groups';
import { FR } from '@dzgrid/dom/locales/fr';
import { FR_COLUMNS } from '@dzgrid/dom/locales/fr-columns';

type Station = { id: string; name: string; tempMin: number; tempMax: number; rain: number };

const columns: ColumnOrGroup<Station>[] = [
  { id: 'name', header: 'Station' },
  { id: 'weather', header: 'Météo', collapsible: true, open: false, children: [
    { id: 'tempMin', header: 'Min °C', type: 'number', groupShow: 'open' },
    { id: 'tempMax', header: 'Max °C', type: 'number', groupShow: 'closed' },
    { id: 'rain', header: 'Pluie (mm)', type: 'number', groupShow: 'open' },
  ] },
];

const folds = groups();

const grid = createGrid<Station>(document.getElementById('stations')!, {
  rows: [{ id: 's1', name: 'Cap Lumière', tempMin: 4, tempMax: 17, rain: 2.5 }],
  columns,
  getRowId: (s) => s.id,
  messages: { ...FR, text: { ...FR.text, ...FR_COLUMNS.text } },
  features: [spans(), folds],
});

folds.api(grid)?.toggle('weather');

Démo

Le bouton du groupe replie Météo sur sa colonne Max °C.

Voir aussi

• L’option de colonne groupShow.
• La fonction spans : les lignes de titres de groupes.
• Colonnes : les groupes de colonnes dans le guide.