Zeilengruppierung, Aggregation, Baumdaten, Master/Detail und Excel-Export gehören bei AG Grid zu Enterprise: Für den Produktiveinsatz ist eine kommerzielle Lizenz nötig, und ohne Schlüssel zeigt das Grid ein Wasserzeichen und gibt einen Fehler in der Konsole aus. Das Data Grid von Needless UI bietet Gruppierung mit Summen, Baumdaten, Zeilendetails und .xlsx-Export unter MIT-Lizenz. In dieser Anleitung stellst du eine Angular-App vom einen auf das andere um: was sich übernehmen lässt, was nicht und wie sich der Code ändert.
Die Anleitung verwendet die Namen aus AG Grid 36. AG Grid 36 unterstützt Angular 20 bis 22; Needless UI braucht Angular 22.
Was du bekommst
| Funktion | AG Grid | Needless UI |
|---|---|---|
| Zeilengruppierung mit Aggregaten und einer Summenzeile | Enterprise | Ja: mehrere Ebenen, mit Summe, Durchschnitt, Minimum, Maximum, Anzahl oder einer Funktion |
| Baumdaten | Enterprise | Ja, aus verschachtelten Zeilen |
| Details unter einer Zeile (Master/Detail) | Enterprise | Ja: ein beliebiges Template unter der Zeile, auch ein weiteres Grid |
| Excel-Export | Enterprise: Stile, mehrere Tabellenblätter, Bilder und Formeln | Ja: ein Tabellenblatt mit typisierten Zellen, Zahlenformaten und fixierter Kopfzeile samt Filtern |
| Spaltenmenü mit Spaltenauswahl | Enterprise | Ja: jede Spalte sortieren, filtern, fixieren, verschieben, an den Inhalt anpassen und ausblenden, dazu alle auf einmal ein- oder ausblenden |
| Sortierung nach mehreren Spalten, Schnellsuche, Paginierung, Zeilenauswahl | Community | Ja |
| Spaltenfilter | Community: bis zu zwei Bedingungen, verknüpft mit AND oder OR | Eine Bedingung pro Spalte |
| Set-Filter, Multi-Filter und erweiterte Filter | Enterprise | Teilweise: eine Checkliste mit den Optionen einer Spalte, nicht mit den Werten in den Daten |
| Breite, Reihenfolge, Fixierung und Sichtbarkeit von Spalten ändern und speichern | Community | Ja |
| Virtuelles Scrollen | Community: Zeilen und Spalten | Zeilen |
| Zellbearbeitung | Community; einige Editoren nur mit Enterprise | Ja, je nach Spaltentyp, mit Validierung; keine eigenen Editoren und keine Rückgängig-Funktion |
| Pivotierung, integrierte Diagramme | Enterprise | Nein |
| Zwischenablage, Auswahl von Zellbereichen, Kontextmenü, Statusleiste, Seitenleiste | Enterprise | Nein |
| Daten von einem Server | Serverseitiges Zeilenmodell: Enterprise; Laden in Blöcken: Community | Seiten von deinem Server, der sortiert, filtert und sucht; keine Gruppierung auf dem Server |
| Spaltengruppen, Ziehen von Zeilen, fixierte Zeilen | Community | Nein |
| Frameworks | React, Angular 20 bis 22, Vue und reines JavaScript | Angular 22 und React 19 |
Was wem entspricht
| AG Grid | Grid von Needless UI |
|---|---|
<ag-grid-angular>, Registrierung der Module, LicenseManager.setLicenseKey() | <nui-grid>; nichts zu registrieren und kein Schlüssel |
rowData, columnDefs | [(rows)], [columns] |
field, headerName | id, header |
valueGetter, valueFormatter, cellDataType | value, format (Intl-Optionen oder eine Funktion), type |
cellRenderer | Ein nuiGridCell-Template |
pinned: 'left', hide | pinned: 'start', hidden |
rowGroup einer Spalte, groupDefaultExpanded | [(groupBy)], eine Liste von Spalten-IDs. Gruppen sind anfangs offen; [(collapsed)] schließt sie. |
aggFunc, grandTotalRow | aggregate, totals |
treeData mit treeDataChildrenField | children: (row) => row.children |
masterDetail, detailCellRenderer | Ein nuiGridDetail-Template und [(details)] |
quickFilterText | [(search)] |
rowSelection, getSelectedRows() | selection und [(selected)]: die Schlüssel der ausgewählten Zeilen |
pagination, paginationPageSize | [(pageSize)], [(page)], pageSizes |
getColumnState(), applyColumnState() | [(columnState)] |
exportDataAsExcel(), exportDataAsCsv() | exportXlsx() gibt einen Blob zurück und exportCsv() Text |
cellValueChanged, rowDoubleClicked | (cellEdit), (rowActivate) |
rowModelType: 'serverSide' | mode="server", total, (queryChange) |
localeText, enableRtl | labels; die Darstellung von rechts nach links folgt dem dir der Seite |
Bestellungen nach Land gruppiert, mit beiden gebaut
Die Aufgabe: Bestellungen nach Land gruppiert, mit einer Summe pro Land und einer Gesamtsumme, dazu Excel-Export, Schnellsuche und Mehrfachauswahl. Mit AG Grid 36, bei dem Gruppierung, Summen und Excel-Export Enterprise voraussetzen:
Mit dem Grid von Needless UI:
Ein paar Dinge funktionieren anders. Die Auswahl enthält Schlüssel, also die IDs der Zeilen, und übersteht deshalb neue Daten; brauchst du die Zeilen selbst, ordne die Schlüssel wieder den Zeilen zu. Gruppen sind anfangs offen. Die Beschriftung einer Gruppe steht in der ersten sichtbaren Spalte, und die Suche liest nur sichtbare Spalten; lass die gruppierte Spalte also eingeblendet, wenn die Suche sie berücksichtigen soll. Und exportXlsx() gibt die Datei zurück, statt sie herunterzuladen: ein Tabellenblatt mit den gefilterten, sortierten Zeilen, ohne Gruppenzeilen.
Wenn dir etwas fehlt
Wenn deine App auf Pivotierung, Diagramme, Zwischenablage und Bereichsauswahl, Gruppierung auf dem Server oder Spaltengruppen angewiesen ist, lässt sich AG Grid noch nicht durch das Grid von Needless UI ersetzen. Eröffne ein Issue für das, was du brauchst. Für alles andere findest du auf der Seite des Data Grids jeden Input, jeden Output und jedes Beispiel.