API di Griglia dati per React

Import

import-grid.tsx

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

NuiGrid

Una griglia dati su una tabella nativa.

NuiGrid: Proprietà
Nome	Tipo	Predefinito	Descrizione
`rows`Prop	`readonly T[]`		I dati. Una modifica sostituisce la sua riga e chiama `onRowsChange`; le prossime `rows` che passi sostituiscono le modifiche.
`onRowsChange`Callback	`(rows: readonly T[]) => void`		Chiamata con le righe dopo ogni modifica confermata.
`columns`Prop	`NuiGridColumn<T>[]`		Le colonne, come oggetti `NuiGridColumn`.
`rowId`Prop	`(row: T) => unknown`	`row.id ?? row`	La chiave di una riga, per la selezione e il tracciamento.
`label`Prop	`string`		Nome accessibile della griglia.
`selection`Prop	`'none' \| 'single' \| 'multiple'`	`'none'`	Se le righe si possono selezionare, e quante.
`selected` `defaultSelected` `onSelectedChange`Stato	`unknown[]`	`[]`	Le chiavi delle righe selezionate.
`sort` `defaultSort` `onSortChange`Stato	`NuiGridSort[]`	`[]`	L’ordinamento, come oggetti `{ column, direction }`; il primo ordina per primo.
`filters` `defaultFilters` `onFiltersChange`Stato	`Record<string, NuiGridFilter>`	`{}`	Un filtro per ogni id di colonna: un operatore e un valore.
`search` `defaultSearch` `onSearchChange`Stato	`string`	`''`	Parole che devono comparire tutte in una riga.
`pageSize` `defaultPageSize` `onPageSizeChange`Stato	`number`	`0`	Righe per pagina, o 0 per un unico elenco a scorrimento.
`page` `defaultPage` `onPageChange`Stato	`number`	`0`	La pagina mostrata, a partire da 0.
`pageSizes`Prop	`number[]`	`[10, 25, 50, 100]`	Le scelte nel paginatore.
`virtual`Prop	`boolean \| 'auto'`	`'auto'`	Renderizza solo le righe visibili: sempre, mai, o `auto` oltre 100 righe senza paginazione.
`height`Prop	`string`		Una lunghezza CSS che limita la griglia; il contenuto scorre all’interno.
`columnState` `defaultColumnState` `onColumnStateChange`Stato	`NuiGridColumnState[]`	`[]`	Larghezza, ordine, blocco e visibilità di ogni colonna, da salvare e ripristinare.
`mode`Prop	`'client' \| 'server'`	`'client'`	`server` mostra le righe man mano che arrivano e lascia a te ordinamento, filtri e paginazione.
`total`Prop	`number`		Il numero di righe sul server.
`loading`Prop	`boolean`	`false`	Mostra una barra di avanzamento, e righe segnaposto quando non ce ne sono.
`locale`Prop	`string`	`'en-US'`	Formatta numeri e date, e legge i numeri digitati.
`labels`Prop	`Partial<NuiGridLabels>`		Ogni testo che la griglia mostra o annuncia, da tradurre.
`corners`Prop	`NuiCorners`		La forma degli angoli: `round`, `squircle`, `bevel`, `scoop`, `notch` o `square`.
`radius`Prop	`NuiRadius`		Quanto sono grandi gli angoli: `none`, `small`, `medium`, `large` o `full`.
`density`Prop	`NuiDensity`		Quanto spazio occupa: `compact`, `regular` o `roomy`.
`groupBy`Prop	`string[]`	`[]`	Le colonne per cui raggruppare le righe, a partire dalla più esterna.
`collapsed` `defaultCollapsed` `onCollapsedChange`Stato	`string[]`	`[]`	Le chiavi dei gruppi chiusi; all’inizio i gruppi sono aperti.
`getChildren`Prop	`(row: T) => T[] \| undefined`		I figli di una riga: la griglia mostra dati ad albero.
`expanded` `defaultExpanded` `onExpandedChange`Stato	`unknown[]`	`[]`	Le chiavi delle righe aperte nei dati ad albero; all’inizio sono chiuse.
`details` `defaultDetails` `onDetailsChange`Stato	`unknown[]`	`[]`	Le chiavi delle righe con i dettagli aperti.
`totals, flash`Prop	`boolean`	`false`	Una riga di aggregati su tutte le righe filtrate; celle che lampeggiano quando il loro testo cambia, nelle righe con un `rowId` stabile.
`layout`Prop	`'table' \| 'list' \| 'auto'`	`'table'`	`list` mostra le righe come card, e `auto` lo fa sugli schermi stretti.
`toolbar`Prop	`boolean \| 'auto'`	`'auto'`	Una barra che ordina, filtra e seleziona tutte le righe: sempre, mai, o `auto` con le card.
`renderEmpty`Render prop	`(filtered: boolean) => ReactNode`		Cosa si vede quando non ci sono righe; riceve un valore che dice se le hanno nascoste i filtri.
`renderDetail`Render prop	`(row: T) => ReactNode`		I dettagli di una riga, mostrati sotto di essa quando è aperta. La griglia aggiunge una colonna di pulsanti toggle.
`onRowActivate`Callback	`(row: T) => void`		Chiamata con una riga aperta con Invio o con un doppio clic.
`onCellEdit`Callback	`(edit: NuiGridEdit<T>) => void`		Chiamata con ogni modifica confermata.
`onQueryChange`Callback	`(query: NuiGridQuery) => void`		Chiamata con ordinamento, filtri, ricerca e pagina a ogni cambiamento, e una volta all’inizio.
`ref`Prop	`Ref<NuiGridHandle>`		Cosa espone il `ref` della griglia: esportazioni, stampa e focus.
`exportXlsx, print`Metodo	`(options?) => Blob, () => void`		Le righe filtrate e ordinate come foglio di calcolo; stampa tutte le righe.
`exportCsv`Metodo	`(options?) => string`		Le righe filtrate e ordinate delle colonne visibili, in CSV.
`expandAll`Metodo	`(open?: boolean) => void`		Apre ogni gruppo e ogni riga con figli, o li chiude tutti.
`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.
`fit`Metodo	`(id: string) => void`		Adatta una colonna alla più larga delle sue celle renderizzate.

Lo stato funziona come nei campi dei moduli di React: passa un valore e aggiornalo dalla sua callback on…Change, oppure passa un valore default… e lascia che lo tenga il componente.

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

NuiGridColumn

Una colonna. Accetta tutte le proprietà della colonna Angular (solo id e header sono obbligatori), più queste due, che la disegnano.

NuiGridColumn: Proprietà
Nome	Tipo	Predefinito	Descrizione
`renderCell`Render prop	`({ row, value, text, column }) => ReactNode`		Disegna tu le celle della colonna, a partire dalla riga, dal suo valore e dal suo testo.
`renderHeader`Render prop	`(column) => ReactNode`		Disegna tu l’intestazione della colonna; `header` continua a darle il nome.