Le regroupement de lignes, l’agrégation, les données arborescentes, le master/detail et l’export Excel d’AG Grid sont des fonctionnalités Enterprise : leur utilisation en production exige une licence commerciale, et sans clé, la grille affiche un filigrane et signale une erreur dans la console. La grille de données de Needless UI offre le regroupement avec totaux, les données arborescentes, les détails de ligne et l’export .xlsx sous licence MIT. Ce guide fait passer une application Angular de l’une à l’autre : ce qui se transpose, ce qui ne se transpose pas, et comment le code change.
Il reprend les noms d’AG Grid 36. AG Grid 36 prend en charge Angular 20 à 22 ; Needless UI nécessite Angular 22.
Ce que vous obtenez
| Fonctionnalité | AG Grid | Needless UI |
|---|---|---|
| Regroupement de lignes, avec agrégats et ligne de totaux | Enterprise | Oui : sur plusieurs niveaux, avec somme, moyenne, minimum, maximum, décompte ou une fonction |
| Données arborescentes | Enterprise | Oui, à partir de lignes imbriquées |
| Détails sous une ligne (master/detail) | Enterprise | Oui : n’importe quel template sous la ligne, y compris une autre grille |
| Export Excel | Enterprise : styles, plusieurs feuilles, images et formules | Oui : une seule feuille de cellules typées, avec formats de nombre et un en-tête figé doté de filtres |
| Menu de colonne avec sélecteur de colonnes | Enterprise | Oui : trier, filtrer, épingler, déplacer, ajuster à son contenu et masquer chaque colonne, et les afficher ou les masquer toutes |
| Tri sur plusieurs colonnes, recherche rapide, pagination, sélection de lignes | Community | Oui |
| Filtres de colonne | Community : jusqu’à deux conditions, combinées par AND ou OR | Une condition par colonne |
| Filtres par liste de valeurs, multiples et avancés | Enterprise | En partie : une liste à cocher des options d’une colonne, pas des valeurs présentes dans les données |
| Redimensionner, déplacer, épingler et masquer les colonnes, et enregistrer leur état | Community | Oui |
| Défilement virtuel | Community : lignes et colonnes | Lignes |
| Édition des cellules | Community ; certains éditeurs sont réservés à Enterprise | Oui, selon le type de colonne, avec validation ; ni éditeurs personnalisés, ni annulation |
| Tableaux croisés dynamiques, graphiques intégrés | Enterprise | Non |
| Presse-papiers, sélection de plages de cellules, menu contextuel, barre d’état, barre latérale | Enterprise | Non |
| Données d’un serveur | Modèle de lignes côté serveur : Enterprise ; chargement par blocs : Community | Des pages fournies par votre serveur, avec son tri, ses filtres et sa recherche ; pas de regroupement côté serveur |
| Groupes de colonnes, glisser-déposer de lignes, lignes épinglées | Community | Non |
| Frameworks | React, Angular 20 à 22, Vue et JavaScript pur | Angular 22 et React 19 |
Les correspondances
| AG Grid | Grille de Needless UI |
|---|---|
<ag-grid-angular>, enregistrement des modules, LicenseManager.setLicenseKey() | <nui-grid> ; ni module à enregistrer, ni clé |
rowData, columnDefs | [(rows)], [columns] |
field, headerName | id, header |
valueGetter, valueFormatter, cellDataType | value, format (options Intl ou une fonction), type |
cellRenderer | Un template nuiGridCell |
pinned: 'left', hide | pinned: 'start', hidden |
rowGroup d’une colonne, groupDefaultExpanded | [(groupBy)], une liste d’ids de colonnes. Les groupes sont ouverts au départ ; [(collapsed)] les ferme. |
aggFunc, grandTotalRow | aggregate, totals |
treeData avec treeDataChildrenField | children: (row) => row.children |
masterDetail, detailCellRenderer | Un template nuiGridDetail, et [(details)] |
quickFilterText | [(search)] |
rowSelection, getSelectedRows() | selection, et [(selected)] : les clés des lignes sélectionnées |
pagination, paginationPageSize | [(pageSize)], [(page)], pageSizes |
getColumnState(), applyColumnState() | [(columnState)] |
exportDataAsExcel(), exportDataAsCsv() | exportXlsx() renvoie un Blob, et exportCsv() du texte |
cellValueChanged, rowDoubleClicked | (cellEdit), (rowActivate) |
rowModelType: 'serverSide' | mode="server", total, (queryChange) |
localeText, enableRtl | labels ; le sens de droite à gauche suit le dir de la page |
Des commandes regroupées par pays, dans les deux versions
L’objectif : des commandes regroupées par pays, avec un total par pays et un total général, un export Excel, une recherche rapide et la sélection multiple. Avec AG Grid 36, où le regroupement, les totaux et l’export Excel nécessitent Enterprise :
Avec la grille de Needless UI :
Quelques points fonctionnent différemment. La sélection contient des clés, les ids des lignes : elle est donc conservée quand les données changent ; retrouvez les lignes à partir de ces clés quand vous en avez besoin. Les groupes sont ouverts au départ. Le libellé d’un groupe se place dans la première colonne visible, et la recherche ne porte que sur les colonnes visibles : gardez donc la colonne groupée affichée si la recherche doit en tenir compte. Enfin, exportXlsx() renvoie le fichier au lieu de le télécharger : une seule feuille avec les lignes filtrées et triées, sans les lignes de groupe.
Si vous avez besoin de ce qui manque
Si votre application dépend des tableaux croisés dynamiques, des graphiques, du presse-papiers et de la sélection de plages, du regroupement côté serveur ou des groupes de colonnes, la grille de Needless UI ne peut pas encore remplacer AG Grid. Ouvrez une issue pour ce qu’il vous faut. Pour tout le reste, la page de la grille de données présente tous les inputs, outputs et exemples.