Fonctions

La grille seule affiche, fait défiler, trie et sélectionne les lignes. Tout le reste est une fonction : importée depuis son entrée et donnée dans features, pour qu’une application ne charge que ce qu’elle utilise. La plupart des fonctions ont besoin de leurs textes, ajoutés aux messages de la grille, et certaines d’une feuille de style de @dzgrid/theme, chargée après dzgrid.css.

import { createGrid } from '@dzgrid/dom';
import { pagination } from '@dzgrid/dom/pagination';
import { FR } from '@dzgrid/dom/locales/fr';
import { FR_PAGINATION } from '@dzgrid/dom/locales/fr-pagination';

type Row = { id: string; name: string };

createGrid<Row>(document.getElementById('grid')!, {
  rows: [{ id: 'r1', name: 'Premier' }],
  columns: [{ id: 'name', header: 'Nom' }],
  getRowId: (r) => r.id,
  pagination: { pageSize: 50 },
  messages: { ...FR, text: { ...FR.text, ...FR_PAGINATION.text } },
  features: [pagination()],
});

Fonction	Import	Rôle
pagination	@dzgrid/dom/pagination	Un pied sous les lignes : la sélection, la position, et le pagineur.
quickSearch	@dzgrid/dom/search	Un champ de recherche de votre page filtre les lignes sur toutes les colonnes visibles.
csvExport	@dzgrid/dom/export	Écrire les lignes de la grille dans un fichier CSV, Excel ou JSON depuis votre propre bouton.
badge	@dzgrid/dom/parts	Une partie de cellule toute prête : un statut montré comme une petite étiquette encadrée, avec un ton.
cellBoolean	@dzgrid/dom/parts	Une partie de cellule toute prête pour les colonnes oui / non : une marque et le mot, dans la langue de la grille.
rules	@dzgrid/dom/rules	Des règles de sélection : certaines lignes ne peuvent pas être cochées, et l’utilisateur apprend pourquoi.
tree	@dzgrid/dom/tree	Les lignes en arbre, d’après un id de parent, des enfants imbriqués ou un chemin : retrait, chevrons, touches.
lazyChildren	@dzgrid/dom/tree-lazy	Les enfants d’un arbre chargés par votre code ou un serveur la première fois que leur parent s’ouvre.
detail	@dzgrid/dom/detail	Un volet sous une ligne, ouvert par un chevron : votre propre contenu, ou toute une grille.
nestedGrid	@dzgrid/dom/detail	Une partie de détail toute prête : toute une grille à elle dans le volet de chaque maître.
edit	@dzgrid/dom/edit	Tient les modifications : enregistrement, refus, annuler et rétablir, et lignes hors d’ordre après une modification.
editors	@dzgrid/dom/editors	Les champs qui modifient une cellule : texte, nombre, jour, date et heure, oui / non, une liste, ou le vôtre.
listEditor	@dzgrid/dom/editors-list	Le champ liste des éditeurs : choisir une valeur parmi les choix de la colonne, au clavier ou d’un clic.
filters	@dzgrid/dom/filters	Les filtres de colonne : un bouton et une fenêtre dans chaque titre, et une rangée de champs facultative.
range	@dzgrid/dom/range	Des blocs de cellules : prendre un rectangle au clavier ou à la souris, le copier, y coller.
fill	@dzgrid/dom/fill	La poignée de recopie : recopier un bloc, ou continuer une série, à la souris ou au clavier.
columns	@dzgrid/dom/columns	Déplacer les colonnes en faisant glisser leur titre ou au clavier, et les dimensionner au clavier.
columnMenu	@dzgrid/dom/column-menu	Le menu ⋮ de chaque titre de colonne : trier, figer, dimensionner, déplacer, masquer, choisir, rétablir.
contextMenu	@dzgrid/dom/context-menu	Le menu de cellule : copier, coller, recopier, annuler, épingler, exporter, et vos propres entrées, au clic droit ou au clavier.
statusBar	@dzgrid/dom/statusbar	Une bande sous les lignes avec le nombre, la somme, la moyenne, le min et le max du bloc, et les comptes de lignes si vous le demandez.
find	@dzgrid/dom/find	Ctrl+F dans la grille : une barre de recherche qui marque chaque résultat et passe de l’un à l’autre.
rowDrag	@dzgrid/dom/row-drag	Déplacer des lignes par une poignée, au clavier ou par le menu ; la grille dit où, vos données décident.
dock	@dzgrid/dom/dock	Des zones à côté et sous les lignes pour le choix des colonnes, le volet des filtres et vos propres volets.
pivot	@dzgrid/dom/pivot	Un tableau croisé sur le regroupement : les valeurs d’une colonne deviennent des colonnes, avec un total à chaque croisement.
pivotBar	@dzgrid/dom/pivot-bar	La barre du tableau croisé : Lignes, Colonnes et Valeurs, chacune une rangée de puces que l’utilisateur réarrange.
rowNumbers	@dzgrid/dom/row-numbers	Des numéros 1, 2, 3 au début de chaque ligne, dans l’ordre affiché ; un clic prend la ligne.
grouping	@dzgrid/dom/grouping	Des lignes réunies sous des lignes de groupe, un niveau par colonne, avec des totaux.
groupZone	@dzgrid/dom/group-zone	La bande Regrouper par au-dessus des lignes : une puce par colonne de regroupement, à glisser, déplacer ou retirer.
filtersPanel	@dzgrid/dom/filters-panel	Le filtre de chaque colonne dans un volet latéral, avec une recherche de colonne et Effacer tous les filtres.
columnsChooser	@dzgrid/dom/columns-panel	Une fenêtre pour afficher, masquer et ordonner les colonnes, avec un champ de recherche.
gridState	@dzgrid/dom/state	Lire et restaurer l’état de la grille — colonnes, tri, filtres, page, volets — dans le stockage ou dans l’adresse.
pinnedRows	@dzgrid/dom/pinned-rows	Des lignes qui restent visibles : certaines sous les titres, d’autres au pied de la grille.
autoHeight	@dzgrid/dom/auto-height	Des lignes aussi hautes que leur plus haute cellule à la ligne.
rowGaps	@dzgrid/dom/row-gaps	Un espace vide au-dessus de certaines lignes, pour voir d’un coup d’œil où commence une catégorie.
print	@dzgrid/dom/print	Imprimer les lignes telles qu’elles sont à l’écran, en vrai tableau : en-têtes sur chaque page, aucune ligne coupée.
printOnMenu	@dzgrid/dom/print-menu	La commande d’impression du navigateur (Ctrl+P, le menu Fichier) imprime toute la grille en tableau.
freshRows	@dzgrid/dom/fresh-rows	Les lignes qu’a apportées un rafraîchissement sont marquées quelques secondes et comptées une fois au lecteur d’écran.
motion	@dzgrid/dom/motion-gsap	Des lignes qui glissent après un tri, un éclat sur une valeur changée, des fenêtres qui apparaissent en fondu — avec GSAP, que vous installez.
totalsRow	@dzgrid/dom/totals-row	Une ligne Total toujours visible en bas de la grille, d’après le total de chaque colonne.
verticalHeaders	@dzgrid/dom/vertical-headers	Des titres de colonnes écrits vers le haut, pour que des colonnes étroites le restent.
theming	@dzgrid/dom/theme	Écrit le réglage theme en variables CSS et dessine vos propres icônes, les deux en direct.
wrappedHeaders	@dzgrid/dom/wrapped-headers	Les longs titres de colonnes sur plusieurs lignes ; la ligne des titres grandit jusqu’au plus haut.
columnHover	@dzgrid/dom/column-hover	Marque la colonne sous la souris, pour que votre feuille de style la teinte.
responsive	@dzgrid/dom/responsive	Les colonnes qui ne tiennent pas passent en lignes sous chaque ligne au lieu de défiler de côté.
fileImport	@dzgrid/dom/import	Lire un fichier CSV ou Excel déposé sur la grille, ou choisi avec votre bouton, en lignes dont vous décidez.
spans	@dzgrid/dom/spans	Des cellules qui couvrent plusieurs lignes ou colonnes : valeurs fusionnées, étendues venues des données, lignes pleine largeur, titres groupés.
groups	@dzgrid/dom/groups	Des groupes de titres qui s’ouvrent et se ferment, et montrent moins de colonnes une fois fermés.
slots	@dzgrid/dom/slots	Laisse vos parties dessiner les titres de colonnes, le message de la grille, la marque d’attente et l’infobulle.