API der Komponente Data Grid für React

Import

import-grid.tsx

import { NuiGrid, type NuiGridColumn, type NuiGridHandle } from '@needless-ui/react/grid';

NuiGrid

Ein Data Grid auf einer nativen Tabelle.

NuiGrid: Eigenschaften
Name	Typ	Standardwert	Beschreibung
`rows`Prop	`readonly T[]`		Die Daten. Eine Änderung ersetzt ihre Zeile und ruft `onRowsChange` auf; die nächsten `rows`, die du übergibst, ersetzen die Änderungen.
`onRowsChange`Callback	`(rows: readonly T[]) => void`		Wird nach jeder übernommenen Änderung mit den Zeilen aufgerufen.
`columns`Prop	`NuiGridColumn<T>[]`		Die Spalten als `NuiGridColumn`-Objekte.
`rowId`Prop	`(row: T) => unknown`	`row.id ?? row`	Der Schlüssel einer Zeile, für Auswahl und Tracking.
`label`Prop	`string`		Zugänglicher Name des Grids.
`selection`Prop	`'none' \| 'single' \| 'multiple'`	`'none'`	Ob sich Zeilen auswählen lassen, und wie viele.
`selected` `defaultSelected` `onSelectedChange`State	`unknown[]`	`[]`	Die Schlüssel der ausgewählten Zeilen.
`sort` `defaultSort` `onSortChange`State	`NuiGridSort[]`	`[]`	Die Sortierung als `{ column, direction }`-Objekte; das erste sortiert zuerst.
`filters` `defaultFilters` `onFiltersChange`State	`Record<string, NuiGridFilter>`	`{}`	Ein Filter pro Spalten-ID: ein Operator und ein Wert.
`search` `defaultSearch` `onSearchChange`State	`string`	`''`	Wörter, die alle in einer Zeile vorkommen müssen.
`pageSize` `defaultPageSize` `onPageSizeChange`State	`number`	`0`	Zeilen pro Seite oder 0 für eine durchgehende Liste.
`page` `defaultPage` `onPageChange`State	`number`	`0`	Die angezeigte Seite, ab 0.
`pageSizes`Prop	`number[]`	`[10, 25, 50, 100]`	Die Optionen der Seitennavigation.
`virtual`Prop	`boolean \| 'auto'`	`'auto'`	Rendert nur die sichtbaren Zeilen: immer, nie oder `auto` bei mehr als 100 Zeilen ohne Paginierung.
`height`Prop	`string`		Eine CSS-Länge, die das Grid begrenzt; der Inhalt scrollt darin.
`columnState` `defaultColumnState` `onColumnStateChange`State	`NuiGridColumnState[]`	`[]`	Breite, Reihenfolge, Fixierung und Sichtbarkeit jeder Spalte, zum Speichern und Wiederherstellen.
`mode`Prop	`'client' \| 'server'`	`'client'`	`server` zeigt die Zeilen, wie sie ankommen, und überlässt dir Sortieren, Filtern und Paginieren.
`total`Prop	`number`		Die Anzahl der Zeilen auf dem Server.
`loading`Prop	`boolean`	`false`	Zeigt einen Fortschrittsbalken und, solange Zeilen fehlen, Platzhalterzeilen.
`locale`Prop	`string`	`'en-US'`	Formatiert Zahlen und Datumsangaben und liest eingegebene Zahlen ein.
`labels`Prop	`Partial<NuiGridLabels>`		Alle Texte, die das Grid anzeigt oder ansagt, zum Übersetzen.
`corners`Prop	`NuiCorners`		Die Form der Ecken: `round`, `squircle`, `bevel`, `scoop`, `notch` oder `square`.
`radius`Prop	`NuiRadius`		Wie groß die Ecken sind: `none`, `small`, `medium`, `large` oder `full`.
`density`Prop	`NuiDensity`		Wie viel Platz die Komponente einnimmt: `compact`, `regular` oder `roomy`.
`groupBy`Prop	`string[]`	`[]`	Spalten, nach denen Zeilen gruppiert werden, die äußerste zuerst.
`collapsed` `defaultCollapsed` `onCollapsedChange`State	`string[]`	`[]`	Die Schlüssel der geschlossenen Gruppen; anfangs sind alle Gruppen offen.
`getChildren`Prop	`(row: T) => T[] \| undefined`		Die Kindzeilen einer Zeile: Das Grid zeigt Baumdaten.
`expanded` `defaultExpanded` `onExpandedChange`State	`unknown[]`	`[]`	Die Schlüssel der Zeilen, die in Baumdaten offen sind; anfangs sind sie geschlossen.
`details` `defaultDetails` `onDetailsChange`State	`unknown[]`	`[]`	Die Schlüssel der Zeilen, deren Details offen sind.
`totals, flash`Prop	`boolean`	`false`	Eine Zeile mit Aggregaten über alle gefilterten Zeilen; Zellen, die kurz aufleuchten, wenn sich ihr Text ändert, in Zeilen mit einer stabilen `rowId`.
`layout`Prop	`'table' \| 'list' \| 'auto'`	`'table'`	`list` zeigt Zeilen als Karten, `auto` nur auf schmalen Bildschirmen.
`toolbar`Prop	`boolean \| 'auto'`	`'auto'`	Eine Leiste, die die Zeilen sortiert, filtert und alle auswählt: immer, nie oder `auto` bei Karten.
`renderEmpty`Render-Prop	`(filtered: boolean) => ReactNode`		Was erscheint, wenn es keine Zeilen gibt; die Funktion erfährt, ob Filter sie ausgeblendet haben.
`renderDetail`Render-Prop	`(row: T) => ReactNode`		Die Details einer Zeile, die beim Öffnen darunter erscheinen. Das Grid ergänzt eine Spalte mit Toggle-Buttons.
`onRowActivate`Callback	`(row: T) => void`		Wird mit einer per Enter oder Doppelklick geöffneten Zeile aufgerufen.
`onCellEdit`Callback	`(edit: NuiGridEdit<T>) => void`		Wird mit jeder übernommenen Änderung aufgerufen.
`onQueryChange`Callback	`(query: NuiGridQuery) => void`		Wird mit Sortierung, Filtern, Suche und Seite aufgerufen, sobald sie sich ändern, und einmal zu Beginn.
`ref`Prop	`Ref<NuiGridHandle>`		Was du über die `ref` des Grids erreichst: Exporte, Drucken und Fokus.
`exportXlsx, print`Methode	`(options?) => Blob, () => void`		Die gefilterten, sortierten Zeilen als Tabellenkalkulationsdatei; druckt alle Zeilen.
`exportCsv`Methode	`(options?) => string`		Die gefilterten, sortierten Zeilen der sichtbaren Spalten als CSV.
`expandAll`Methode	`(open?: boolean) => void`		Öffnet jede Gruppe und jede Zeile mit Kindzeilen oder schließt alle.
`focusCell`Methode	`(row: number, col: number) => void`		Fokussiert eine Zelle; Zeile `-1` ist die Kopfzeile.
`clearFilters`Methode	`() => void`		Setzt alle Filter und die Suche zurück.
`fit`Methode	`(id: string) => void`		Passt eine Spalte an die breiteste ihrer gerenderten Zellen an.

State funktioniert wie bei Formularfeldern in React: Übergib einen Wert und aktualisiere ihn in seinem on…Change-Callback, oder übergib einen default…-Wert und überlass ihn der Komponente.

Anpassungs-Props, die du nicht setzt, richten sich nach dem nächstgelegenen data-nui-*-Attribut. Mehr dazu in der Anleitung zur Anpassung.

NuiGridColumn

Eine Spalte. Sie akzeptiert alle Eigenschaften der Angular-Spalte (nur id und header sind Pflicht) und dazu diese zwei, die sie zeichnen.

NuiGridColumn: Eigenschaften
Name	Typ	Standardwert	Beschreibung
`renderCell`Render-Prop	`({ row, value, text, column }) => ReactNode`		Damit zeichnest du die Zellen der Spalte selbst, aus der Zeile, ihrem Wert und ihrem Text.
`renderHeader`Render-Prop	`(column) => ReactNode`		Damit zeichnest du den Kopf der Spalte selbst; `header` benennt die Spalte weiterhin.