API del componente Cuadrícula de datos para React

Importación

import-grid.tsx

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

NuiGrid

Una cuadrícula de datos sobre una tabla nativa.

NuiGrid: Propiedades
Nombre	Tipo	Predeterminado	Descripción
`rows`Prop	`readonly T[]`		Los datos. Una edición reemplaza su fila y llama a `onRowsChange`; las siguientes `rows` que pases reemplazan las ediciones.
`onRowsChange`Callback	`(rows: readonly T[]) => void`		Se llama con las filas después de cada edición confirmada.
`columns`Prop	`NuiGridColumn<T>[]`		Las columnas, como objetos `NuiGridColumn`.
`rowId`Prop	`(row: T) => unknown`	`row.id ?? row`	La clave de una fila, para selección y seguimiento.
`label`Prop	`string`		Nombre accesible de la cuadrícula.
`selection`Prop	`'none' \| 'single' \| 'multiple'`	`'none'`	Si se pueden seleccionar filas, y cuántas.
`selected` `defaultSelected` `onSelectedChange`Estado	`unknown[]`	`[]`	Las claves de las filas seleccionadas.
`sort` `defaultSort` `onSortChange`Estado	`NuiGridSort[]`	`[]`	El orden, como objetos `{ column, direction }`; el primero ordena primero.
`filters` `defaultFilters` `onFiltersChange`Estado	`Record<string, NuiGridFilter>`	`{}`	Un filtro por id de columna: un operador y un valor.
`search` `defaultSearch` `onSearchChange`Estado	`string`	`''`	Palabras que deben aparecer todas en una fila.
`pageSize` `defaultPageSize` `onPageSizeChange`Estado	`number`	`0`	Filas por página, o 0 para una sola lista desplazable.
`page` `defaultPage` `onPageChange`Estado	`number`	`0`	La página mostrada, desde 0.
`pageSizes`Prop	`number[]`	`[10, 25, 50, 100]`	Las opciones del paginador.
`virtual`Prop	`boolean \| 'auto'`	`'auto'`	Renderiza solo las filas visibles: siempre, nunca, o `auto` con más de 100 filas sin paginación.
`height`Prop	`string`		Una longitud CSS que limita la cuadrícula; se desplaza por dentro.
`columnState` `defaultColumnState` `onColumnStateChange`Estado	`NuiGridColumnState[]`	`[]`	Ancho, orden, fijación y visibilidad de cada columna, para guardar y restaurar.
`mode`Prop	`'client' \| 'server'`	`'client'`	`server` muestra las filas tal como llegan y te deja a ti ordenar, filtrar y paginar.
`total`Prop	`number`		El número de filas en el servidor.
`loading`Prop	`boolean`	`false`	Muestra una barra de progreso, y filas provisionales mientras no hay ninguna.
`locale`Prop	`string`	`'en-US'`	Da formato a números y fechas, y lee los números escritos.
`labels`Prop	`Partial<NuiGridLabels>`		Todos los textos que la cuadrícula muestra o anuncia, para traducirlos.
`corners`Prop	`NuiCorners`		La forma de sus esquinas: `round`, `squircle`, `bevel`, `scoop`, `notch` o `square`.
`radius`Prop	`NuiRadius`		El tamaño de sus esquinas: `none`, `small`, `medium`, `large` o `full`.
`density`Prop	`NuiDensity`		Cuánto espacio ocupa: `compact`, `regular` o `roomy`.
`groupBy`Prop	`string[]`	`[]`	Columnas por las que agrupar las filas, empezando por la más externa.
`collapsed` `defaultCollapsed` `onCollapsedChange`Estado	`string[]`	`[]`	Claves de los grupos cerrados; los grupos empiezan abiertos.
`getChildren`Prop	`(row: T) => T[] \| undefined`		Los hijos de una fila: la cuadrícula muestra datos en árbol.
`expanded` `defaultExpanded` `onExpandedChange`Estado	`unknown[]`	`[]`	Claves de las filas abiertas en los datos en árbol; empiezan cerradas.
`details` `defaultDetails` `onDetailsChange`Estado	`unknown[]`	`[]`	Claves de las filas con los detalles abiertos.
`totals, flash`Prop	`boolean`	`false`	Una fila de agregados sobre todas las filas filtradas; celdas que destellan cuando cambia su texto, en filas con un `rowId` estable.
`layout`Prop	`'table' \| 'list' \| 'auto'`	`'table'`	`list` muestra las filas como tarjetas, y `auto` lo hace en pantallas estrechas.
`toolbar`Prop	`boolean \| 'auto'`	`'auto'`	Una barra que ordena, filtra y selecciona todas las filas: siempre, nunca, o `auto` con tarjetas.
`renderEmpty`Render prop	`(filtered: boolean) => ReactNode`		Lo que se muestra cuando no hay filas; se le indica si los filtros las ocultaron.
`renderDetail`Render prop	`(row: T) => ReactNode`		Los detalles de una fila, que se muestran debajo de ella al abrirla. La cuadrícula añade una columna de botones de alternancia.
`onRowActivate`Callback	`(row: T) => void`		Se llama con una fila abierta con Intro o con doble clic.
`onCellEdit`Callback	`(edit: NuiGridEdit<T>) => void`		Se llama con cada edición confirmada.
`onQueryChange`Callback	`(query: NuiGridQuery) => void`		Se llama con el orden, los filtros, la búsqueda y la página cada vez que cambian, y una vez al principio.
`ref`Prop	`Ref<NuiGridHandle>`		Lo que expone la `ref` de la cuadrícula: exportaciones, impresión y foco.
`exportXlsx, print`Método	`(options?) => Blob, () => void`		Las filas filtradas y ordenadas, como hoja de cálculo; imprime todas las filas.
`exportCsv`Método	`(options?) => string`		Las filas filtradas y ordenadas de las columnas visibles, en CSV.
`expandAll`Método	`(open?: boolean) => void`		Abre todos los grupos y todas las filas con hijos, o los cierra todos.
`focusCell`Método	`(row: number, col: number) => void`		Pone el foco en una celda; la fila `-1` es el encabezado.
`clearFilters`Método	`() => void`		Borra todos los filtros y la búsqueda.
`fit`Método	`(id: string) => void`		Ajusta una columna a la más ancha de sus celdas renderizadas.

El estado funciona como en los campos de formulario de React: pasa un valor y actualízalo desde su callback on…Change, o pasa un valor default… y deja que el componente lo guarde.

Las props de personalización que no definas siguen el atributo data-nui-* más cercano. Consulta la guía de personalización.

NuiGridColumn

Una columna. Acepta todas las propiedades de la columna de Angular (solo id y header son obligatorios) y estas dos, que la dibujan.

NuiGridColumn: Propiedades
Nombre	Tipo	Predeterminado	Descripción
`renderCell`Render prop	`({ row, value, text, column }) => ReactNode`		Dibuja tú las celdas de la columna, a partir de la fila, su valor y su texto.
`renderHeader`Render prop	`(column) => ReactNode`		Dibuja tú el encabezado de la columna; `header` sigue dándole nombre.