Das Data Grid ist eine native Tabelle mit Sortierung, Filtern, Paginierung und Bearbeitung. Beschreibe die columns, übergib die rows, und jede Zelle wird nach ihrem Typ passend zur Locale formatiert: Zahlen, Währungen, Datumsangaben, Ja und Nein sowie Beschriftungen für enum-Werte.
Sein Zustand steckt in Models, die du binden, speichern und an einen Server schicken kannst: sort, filters, search, page, selected und columnState für Breiten, Reihenfolge, Fixierung und ausgeblendete Spalten, wie Nutzer sie festlegen. Ohne Paginierung werden nur die sichtbaren Zeilen gerendert, sodass 100.000 Zeilen so flüssig scrollen wie zehn.
Jede Zelle ist per Tastatur erreichbar, und im Panel jeder Spalte lässt sie sich sortieren, filtern, fixieren, verschieben, an den Inhalt anpassen und ausblenden.
Suche, Sortierung und Paginierung
Tippe, um alle Spalten zu durchsuchen. Klicke auf einen Spaltenkopf, um zu sortieren, und mit Umschalt + Klick fügst du eine zweite Spalte hinzu. nuiGridCell zeichnet den Status, und exportCsv() liefert, was angezeigt wird.
Auswahl
selection="multiple" ergänzt Checkboxen und bindet die Schlüssel der ausgewählten Zeilen. Umschalt + Klick wählt einen Bereich aus; die Checkbox im Tabellenkopf wählt alle passenden Zeilen aus.
Bearbeitung
Doppelklicke auf eine Zelle, drücke Enter oder tippe einfach los. validate hält den Editor mit einer Meldung offen; eine übernommene Änderung aktualisiert rows und emittiert cellEdit.
100.000 Zeilen
Ohne Paginierung werden nur die sichtbaren Zeilen gerendert. Fixierte Spalten bleiben am Rand, und columnState behält das Layout, das Nutzer einrichten.
Serverdaten
Im Modus server zeigt das Grid die Zeilen, wie sie ankommen, und meldet jede Änderung über queryChange. Setze loading, während du Daten abrufst.