Des lignes par identifiant, jamais par position
Chaque ligne a un identifiant stable (getRowId). Commandes, sélection et focus suivent la ligne à travers tris,
filtres et nouvelles données.
DzGrid
Une grille de données écrite de zéro en TypeScript. Tri, filtres, édition, arbres, groupes, tableaux croisés, données serveur, export — chaque fonction est son propre petit import, en TypeScript, en Angular ou en composant web.
Ce que c’est
Section intitulée « Ce que c’est »DzGrid montre des lignes de données dans un tableau où l’on peut travailler : trier par colonne, filtrer, chercher, sélectionner, modifier, déplacer des lignes, les grouper, les exporter dans un fichier. Elle est écrite de zéro en TypeScript, en couches que l’on prend séparément :
@dzgrid/core— les calculs : tri, filtres, groupes, arbres, tableaux croisés, édition, état. Sans DOM, sans horloge, sans dépendance : il tourne dans un navigateur, un worker ou un serveur.@dzgrid/dom— dessine la grille dans n’importe quelle page. Chaque fonction est sa propre entrée (@dzgrid/dom/filters,@dzgrid/dom/export…) : une page ne paie que ce qu’elle importe.@dzgrid/theme— l’aspect, en variables CSS : clair et sombre, densités, contrastes vérifiés.@dzgrid/angularet@dzgrid/element— la même grille en composant Angular ou en composant web.
La grille ci-dessous est une vraie, dessinée par la bibliothèque sur cette page. Triez par un titre, filtrez depuis le menu d’un titre, cochez des lignes, déplacez-vous avec les flèches ; passez le site en sombre et la grille suit.
Données inventées : 60 sachets de graines.
Pensé dès le départ, pas ajouté
Section intitulée « Pensé dès le départ, pas ajouté »Une donnée invalide ne lève jamais d’erreur
Une colonne illisible, une date sans décalage horaire, une réponse du serveur mal formée : chacune devient un
Problem que vous pouvez journaliser, et la grille continue de marcher.
Droite à gauche et fuseaux horaires
Uniquement des côtés logiques : une page en arabe ou en hébreu ne demande aucun autre CSS. Jours du calendrier et instants sont des types de colonne distincts, affichés dans le fuseau choisi.
Clavier et lecteurs d’écran
Le modèle de grille WAI-ARIA, un seul arrêt de tabulation, un chemin clavier pour chaque action, tris et filtres annoncés ; les textes de la grille sont livrés en anglais, en français et en arabe.
Par où commencer
Section intitulée « Par où commencer »TypeScriptcreateGrid dans n’importe quelle page, sans framework.
AngularLe composant dz-grid, Angular 19 à 22.
Composant webdz-grid pour du HTML simple ou tout framework.