API di Griglia dati · Needless UI

Import

import-grid.ts

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

NuiGrid

Una griglia dati su una tabella nativa.

Selettore: nui-grid

NuiGrid: Proprietà
Nome	Tipo	Predefinito	Descrizione
`rows`Bidirezionale	`readonly T[]`		I dati. Le modifiche sostituiscono le righe, quindi collegali con `[(rows)]`.
`columns`Input	`NuiGridColumn<T>[]`		Le colonne, come oggetti `NuiGridColumn`.
`rowId`Input	`(row: T) => unknown`	`row.id ?? row`	La chiave di una riga, per la selezione e il tracciamento.
`label`Input	`string`		Nome accessibile della griglia.
`selection`Input	`'none' \| 'single' \| 'multiple'`	`'none'`	Se le righe si possono selezionare, e quante.
`selected`Bidirezionale	`unknown[]`	`[]`	Le chiavi delle righe selezionate.
`sort`Bidirezionale	`NuiGridSort[]`	`[]`	L’ordinamento, come oggetti `{ column, direction }`; il primo ordina per primo.
`filters`Bidirezionale	`Record<string, NuiGridFilter>`	`{}`	Un filtro per ogni id di colonna: un operatore e un valore.
`search`Bidirezionale	`string`	`''`	Parole che devono comparire tutte in una riga.
`pageSize`Bidirezionale	`number`	`0`	Righe per pagina, o 0 per un unico elenco a scorrimento.
`page`Bidirezionale	`number`	`0`	La pagina mostrata, a partire da 0.
`pageSizes`Input	`number[]`	`[10, 25, 50, 100]`	Le scelte nel paginatore.
`virtual`Input	`boolean \| 'auto'`	`'auto'`	Renderizza solo le righe visibili: sempre, mai, o `auto` oltre 100 righe senza paginazione.
`height`Input	`string`		Una lunghezza CSS che limita la griglia; il contenuto scorre all’interno.
`columnState`Bidirezionale	`NuiGridColumnState[]`	`[]`	Larghezza, ordine, blocco e visibilità di ogni colonna, da salvare e ripristinare.
`mode`Input	`'client' \| 'server'`	`'client'`	`server` mostra le righe man mano che arrivano e lascia a te ordinamento, filtri e paginazione.
`total`Input	`number`		Il numero di righe sul server.
`loading`Input	`boolean`	`false`	Mostra una barra di avanzamento, e righe segnaposto quando non ce ne sono.
`locale`Input	`string`	`LOCALE_ID`	Formatta numeri e date, e legge i numeri digitati.
`labels`Input	`Partial<NuiGridLabels>`		Ogni testo che la griglia mostra o annuncia, da tradurre.
`corners`Input	`NuiCorners`		La forma degli angoli: `round`, `squircle`, `bevel`, `scoop`, `notch` o `square`.
`radius`Input	`NuiRadius`		Quanto sono grandi gli angoli: `none`, `small`, `medium`, `large` o `full`.
`density`Input	`NuiDensity`		Quanto spazio occupa: `compact`, `regular` o `roomy`.
`rowActivate`Output	`T`		Emette una riga aperta con Invio o con un doppio clic.
`cellEdit`Output	`NuiGridEdit<T>`		Emette ogni modifica confermata.
`queryChange`Output	`NuiGridQuery`		Emette ordinamento, filtri, ricerca e pagina a ogni cambiamento.
`exportCsv`Metodo	`(options?) => string`		Le righe filtrate e ordinate delle colonne visibili, in CSV.
`focusCell`Metodo	`(row: number, col: number) => void`		Sposta il focus su una cella; la riga `-1` è l’intestazione.
`clearFilters`Metodo	`() => void`		Azzera tutti i filtri e la ricerca.

Gli input di personalizzazione che non imposti seguono l’attributo data-nui-* più vicino. Vedi la guida alla personalizzazione.

NuiGridColumn

Una colonna. Solo id e header sono obbligatori.

NuiGridColumn: Proprietà
Nome	Tipo	Predefinito	Descrizione
`id`Proprietà	`string`		Univoco; la chiave in ordinamento, filtri e stato delle colonne.
`header`Proprietà	`string`		Il testo dell’intestazione.
`value`Proprietà	`keyof T \| ((row: T) => V)`		Una chiave della riga, o una funzione della riga. Di default è `row[id]`.
`type`Proprietà	`'text' \| 'number' \| 'date' \| 'boolean' \| 'enum'`	`'text'`	Stabilisce allineamento, ordinamento, filtro ed editor.
`format`Proprietà	`Intl options \| ((value, row) => string)`		Opzioni di `Intl` per numeri e date, o una funzione che produce il testo.
`options`Proprietà	`NuiOption<V>[]`		Le opzioni di una colonna `enum`, come oggetti `NuiOption`.
`width, minWidth, maxWidth`Proprietà	`number`		In pixel.
`flex`Proprietà	`number`		Divide lo spazio rimasto con le altre colonne `flex`.
`align`Proprietà	`'start' \| 'center' \| 'end'`		Di default dipende dal tipo: numeri e date alla fine.
`pinned, hidden`Proprietà	`'start' \| 'end', boolean`		Blocco e visibilità iniziali della colonna.
`sortable, filterable, resizable, reorderable, hideable`Proprietà	`boolean`	`true`	Ognuna si può disattivare con `false`.
`compare`Proprietà	`(a: V, b: V) => number`		Un ordinamento personalizzato.
`editable, validate`Proprietà	`boolean \| ((row) => boolean), (value, row) => string \| null`		Se le celle si possono modificare, e un messaggio quando un valore non è valido.
`set`Proprietà	`(row: T, value: V) => T`		Crea la riga modificata. Di default è una copia con il nuovo valore.

NuiGridCell

Disegna le celle di una colonna. Il contesto contiene la riga, il valore e il testo.

Selettore: ng-template[nuiGridCell]

NuiGridCell: Proprietà
Nome	Tipo	Predefinito	Descrizione
`nuiGridCell`Input	`string`		L’id della colonna.

NuiGridHeader

Disegna l’intestazione di una colonna.

Selettore: ng-template[nuiGridHeader]

NuiGridHeader: Proprietà
Nome	Tipo	Predefinito	Descrizione
`nuiGridHeader`Input	`string`		L’id della colonna.

NuiGridEmpty

Cosa si vede quando non ci sono righe. Il contesto indica se le hanno nascoste i filtri.

Selettore: ng-template[nuiGridEmpty]