API do componente Grade de dados para React

Importação

import-grid.tsx

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

NuiGrid

Uma grade de dados sobre uma tabela nativa.

NuiGrid: Propriedades
Nome	Tipo	Padrão	Descrição
`rows`Prop	`readonly T[]`		Os dados. Uma edição substitui a linha dela e chama `onRowsChange`; as próximas `rows` que você passar substituem as edições.
`onRowsChange`Callback	`(rows: readonly T[]) => void`		Chamado com as linhas depois de cada edição confirmada.
`columns`Prop	`NuiGridColumn<T>[]`		As colunas, como objetos `NuiGridColumn`.
`rowId`Prop	`(row: T) => unknown`	`row.id ?? row`	A chave de uma linha, para seleção e rastreamento.
`label`Prop	`string`		Nome acessível da grade.
`selection`Prop	`'none' \| 'single' \| 'multiple'`	`'none'`	Se as linhas podem ser selecionadas, e quantas.
`selected` `defaultSelected` `onSelectedChange`Estado	`unknown[]`	`[]`	As chaves das linhas selecionadas.
`sort` `defaultSort` `onSortChange`Estado	`NuiGridSort[]`	`[]`	A ordenação, como objetos `{ column, direction }`; o primeiro ordena primeiro.
`filters` `defaultFilters` `onFiltersChange`Estado	`Record<string, NuiGridFilter>`	`{}`	Um filtro por id de coluna: um operador e um valor.
`search` `defaultSearch` `onSearchChange`Estado	`string`	`''`	Palavras que precisam aparecer todas em uma linha.
`pageSize` `defaultPageSize` `onPageSizeChange`Estado	`number`	`0`	Linhas por página, ou 0 para uma única lista rolável.
`page` `defaultPage` `onPageChange`Estado	`number`	`0`	A página mostrada, a partir de 0.
`pageSizes`Prop	`number[]`	`[10, 25, 50, 100]`	As opções do paginador.
`virtual`Prop	`boolean \| 'auto'`	`'auto'`	Renderiza só as linhas visíveis: sempre, nunca, ou `auto` acima de 100 linhas sem paginação.
`height`Prop	`string`		Um comprimento CSS que limita a grade; o conteúdo rola dentro dela.
`columnState` `defaultColumnState` `onColumnStateChange`Estado	`NuiGridColumnState[]`	`[]`	A largura, a ordem, a fixação e a visibilidade de cada coluna, para salvar e restaurar.
`mode`Prop	`'client' \| 'server'`	`'client'`	`server` mostra as linhas conforme chegam e deixa a ordenação, a filtragem e a paginação com você.
`total`Prop	`number`		O número de linhas no servidor.
`loading`Prop	`boolean`	`false`	Mostra uma barra de progresso, e linhas provisórias enquanto não há nenhuma.
`locale`Prop	`string`	`'en-US'`	Formata números e datas, e lê números digitados.
`labels`Prop	`Partial<NuiGridLabels>`		Todo texto que a grade mostra ou anuncia, para traduzir.
`corners`Prop	`NuiCorners`		O formato dos cantos: `round`, `squircle`, `bevel`, `scoop`, `notch` ou `square`.
`radius`Prop	`NuiRadius`		O tamanho dos cantos: `none`, `small`, `medium`, `large` ou `full`.
`density`Prop	`NuiDensity`		Quanto espaço ele ocupa: `compact`, `regular` ou `roomy`.
`groupBy`Prop	`string[]`	`[]`	As colunas pelas quais agrupar as linhas, a partir da mais externa.
`collapsed` `defaultCollapsed` `onCollapsedChange`Estado	`string[]`	`[]`	As chaves dos grupos fechados; os grupos começam abertos.
`getChildren`Prop	`(row: T) => T[] \| undefined`		Os filhos de uma linha: a grade mostra dados em árvore.
`expanded` `defaultExpanded` `onExpandedChange`Estado	`unknown[]`	`[]`	As chaves das linhas abertas nos dados em árvore; elas começam fechadas.
`details` `defaultDetails` `onDetailsChange`Estado	`unknown[]`	`[]`	As chaves das linhas com os detalhes abertos.
`totals, flash`Prop	`boolean`	`false`	Uma linha de agregados sobre todas as linhas filtradas; células que piscam quando o texto delas muda, em linhas com um `rowId` estável.
`layout`Prop	`'table' \| 'list' \| 'auto'`	`'table'`	`list` mostra as linhas como cards, e `auto` faz isso em telas estreitas.
`toolbar`Prop	`boolean \| 'auto'`	`'auto'`	Uma barra que ordena, filtra e seleciona todas as linhas: sempre, nunca, ou `auto` com cards.
`renderEmpty`Render prop	`(filtered: boolean) => ReactNode`		O que aparece quando não há linhas; a função fica sabendo se os filtros as ocultaram.
`renderDetail`Render prop	`(row: T) => ReactNode`		Os detalhes de uma linha, mostrados abaixo dela quando abertos. A grade adiciona uma coluna de botões de alternância.
`onRowActivate`Callback	`(row: T) => void`		Chamado com uma linha aberta com Enter ou com um clique duplo.
`onCellEdit`Callback	`(edit: NuiGridEdit<T>) => void`		Chamado com cada edição confirmada.
`onQueryChange`Callback	`(query: NuiGridQuery) => void`		Chamado com a ordenação, os filtros, a busca e a página sempre que mudam, e uma vez no início.
`ref`Prop	`Ref<NuiGridHandle>`		O que a `ref` da grade expõe: exportações, impressão e foco.
`exportXlsx, print`Método	`(options?) => Blob, () => void`		As linhas filtradas e ordenadas como planilha; imprime todas as linhas.
`exportCsv`Método	`(options?) => string`		As linhas filtradas e ordenadas das colunas visíveis, em CSV.
`expandAll`Método	`(open?: boolean) => void`		Abre todos os grupos e todas as linhas com filhos, ou fecha todos.
`focusCell`Método	`(row: number, col: number) => void`		Move o foco para uma célula; a linha `-1` é o cabeçalho.
`clearFilters`Método	`() => void`		Limpa todos os filtros e a busca.
`fit`Método	`(id: string) => void`		Ajusta uma coluna à mais larga das células renderizadas dela.

O estado funciona como nos campos de formulário do React: passe um valor e atualize-o pelo callback on…Change dele, ou passe um valor default… e deixe o componente guardá-lo.

As props de personalização que você não definir seguem o atributo data-nui-* mais próximo. Veja o guia de personalização.

NuiGridColumn

Uma coluna. Aceita todas as propriedades da coluna do Angular (só id e header são obrigatórios), além destas duas, que a desenham.

NuiGridColumn: Propriedades
Nome	Tipo	Padrão	Descrição
`renderCell`Render prop	`({ row, value, text, column }) => ReactNode`		Desenhe você mesmo as células da coluna, a partir da linha, do valor e do texto dela.
`renderHeader`Render prop	`(column) => ReactNode`		Desenhe você mesmo o cabeçalho da coluna; `header` continua dando nome a ela.