API der Komponente Data Grid

Import

import-grid.ts

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

NuiGrid

Ein Data Grid auf einer nativen Tabelle.

Selektor: nui-grid

NuiGrid: Eigenschaften
Name	Typ	Standardwert	Beschreibung
`rows`Two-Way	`readonly T[]`		Die Daten. Änderungen ersetzen Zeilen, also binde mit `[(rows)]`.
`columns`Input	`NuiGridColumn<T>[]`		Die Spalten als `NuiGridColumn`-Objekte.
`rowId`Input	`(row: T) => unknown`	`row.id ?? row`	Der Schlüssel einer Zeile, für Auswahl und Tracking.
`label`Input	`string`		Zugänglicher Name des Grids.
`selection`Input	`'none' \| 'single' \| 'multiple'`	`'none'`	Ob sich Zeilen auswählen lassen, und wie viele.
`selected`Two-Way	`unknown[]`	`[]`	Die Schlüssel der ausgewählten Zeilen.
`sort`Two-Way	`NuiGridSort[]`	`[]`	Die Sortierung als `{ column, direction }`-Objekte; das erste sortiert zuerst.
`filters`Two-Way	`Record<string, NuiGridFilter>`	`{}`	Ein Filter pro Spalten-ID: ein Operator und ein Wert.
`search`Two-Way	`string`	`''`	Wörter, die alle in einer Zeile vorkommen müssen.
`pageSize`Two-Way	`number`	`0`	Zeilen pro Seite oder 0 für eine durchgehende Liste.
`page`Two-Way	`number`	`0`	Die angezeigte Seite, ab 0.
`pageSizes`Input	`number[]`	`[10, 25, 50, 100]`	Die Optionen der Seitennavigation.
`virtual`Input	`boolean \| 'auto'`	`'auto'`	Rendert nur die sichtbaren Zeilen: immer, nie oder `auto` bei mehr als 100 Zeilen ohne Paginierung.
`height`Input	`string`		Eine CSS-Länge, die das Grid begrenzt; der Inhalt scrollt darin.
`columnState`Two-Way	`NuiGridColumnState[]`	`[]`	Breite, Reihenfolge, Fixierung und Sichtbarkeit jeder Spalte, zum Speichern und Wiederherstellen.
`mode`Input	`'client' \| 'server'`	`'client'`	`server` zeigt die Zeilen, wie sie ankommen, und überlässt dir Sortieren, Filtern und Paginieren.
`total`Input	`number`		Die Anzahl der Zeilen auf dem Server.
`loading`Input	`boolean`	`false`	Zeigt einen Fortschrittsbalken und, solange Zeilen fehlen, Platzhalterzeilen.
`locale`Input	`string`	`LOCALE_ID`	Formatiert Zahlen und Datumsangaben und liest eingegebene Zahlen ein.
`labels`Input	`Partial<NuiGridLabels>`		Alle Texte, die das Grid anzeigt oder ansagt, zum Übersetzen.
`corners`Input	`NuiCorners`		Die Form der Ecken: `round`, `squircle`, `bevel`, `scoop`, `notch` oder `square`.
`radius`Input	`NuiRadius`		Wie groß die Ecken sind: `none`, `small`, `medium`, `large` oder `full`.
`density`Input	`NuiDensity`		Wie viel Platz die Komponente einnimmt: `compact`, `regular` oder `roomy`.
`rowActivate`Output	`T`		Emittiert eine per Enter oder Doppelklick geöffnete Zeile.
`cellEdit`Output	`NuiGridEdit<T>`		Emittiert jede übernommene Änderung.
`queryChange`Output	`NuiGridQuery`		Emittiert Sortierung, Filter, Suche und Seite, sobald sie sich ändern.
`exportCsv`Methode	`(options?) => string`		Die gefilterten, sortierten Zeilen der sichtbaren Spalten als CSV.
`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.

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

NuiGridColumn

Eine Spalte. Nur id und header sind Pflicht.

NuiGridColumn: Eigenschaften
Name	Typ	Standardwert	Beschreibung
`id`Eigenschaft	`string`		Eindeutig; der Schlüssel in Sortierung, Filtern und Spaltenzustand.
`header`Eigenschaft	`string`		Der Text des Spaltenkopfs.
`value`Eigenschaft	`keyof T \| ((row: T) => V)`		Ein Schlüssel der Zeile oder eine Funktion der Zeile. Standardmäßig `row[id]`.
`type`Eigenschaft	`'text' \| 'number' \| 'date' \| 'boolean' \| 'enum'`	`'text'`	Bestimmt Ausrichtung, Sortierung, Filter und Editor.
`format`Eigenschaft	`Intl options \| ((value, row) => string)`		`Intl`-Optionen für Zahlen und Datumsangaben oder eine Funktion, die den Text erzeugt.
`options`Eigenschaft	`NuiOption<V>[]`		Die Optionen einer `enum`-Spalte als `NuiOption`-Objekte.
`width, minWidth, maxWidth`Eigenschaft	`number`		In Pixeln.
`flex`Eigenschaft	`number`		Teilt den restlichen Platz mit den anderen `flex`-Spalten.
`align`Eigenschaft	`'start' \| 'center' \| 'end'`		Standardmäßig nach Typ: Zahlen und Datumsangaben am Ende.
`pinned, hidden`Eigenschaft	`'start' \| 'end', boolean`		Anfängliche Fixierung und Sichtbarkeit der Spalte.
`sortable, filterable, resizable, reorderable, hideable`Eigenschaft	`boolean`	`true`	Einzeln mit `false` abschaltbar.
`compare`Eigenschaft	`(a: V, b: V) => number`		Eine eigene Sortierung.
`editable, validate`Eigenschaft	`boolean \| ((row) => boolean), (value, row) => string \| null`		Ob Zellen bearbeitbar sind, und eine Meldung, wenn ein Wert ungültig ist.
`set`Eigenschaft	`(row: T, value: V) => T`		Erzeugt die bearbeitete Zeile. Standardmäßig eine Kopie mit dem neuen Wert.

NuiGridCell

Zeichnet die Zellen einer Spalte. Der Kontext enthält die Zeile, den Wert und den Text.

Selektor: ng-template[nuiGridCell]

NuiGridCell: Eigenschaften
Name	Typ	Standardwert	Beschreibung
`nuiGridCell`Input	`string`		Die ID der Spalte.

NuiGridHeader

Zeichnet den Kopf einer Spalte.

Selektor: ng-template[nuiGridHeader]

NuiGridHeader: Eigenschaften
Name	Typ	Standardwert	Beschreibung
`nuiGridHeader`Input	`string`		Die ID der Spalte.

NuiGridEmpty

Was erscheint, wenn es keine Zeilen gibt. Der Kontext verrät, ob Filter sie ausgeblendet haben.

Selektor: ng-template[nuiGridEmpty]