Needless UI

Componentes

Grade de dados

Ordene, filtre, selecione, edite e role por qualquer quantidade de linhas.

Importação

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

NuiGrid

Uma grade de dados sobre uma tabela nativa.

Seletor
nui-grid
NomeTipoPadrãoDescrição
rowsBidirecionalreadonly T[]Os dados. Edições substituem linhas, então vincule com [(rows)].
columnsInputNuiGridColumn<T>[]As colunas, como objetos NuiGridColumn.
rowIdInput(row: T) => unknownrow.id ?? rowA chave de uma linha, para seleção e rastreamento.
labelInputstringNome acessível da grade.
selectionInput'none' | 'single' | 'multiple''none'Se as linhas podem ser selecionadas, e quantas.
selectedBidirecionalunknown[][]As chaves das linhas selecionadas.
sortBidirecionalNuiGridSort[][]A ordenação, como objetos { column, direction }; o primeiro ordena primeiro.
filtersBidirecionalRecord<string, NuiGridFilter>{}Um filtro por id de coluna: um operador e um valor.
searchBidirecionalstring''Palavras que precisam aparecer todas em uma linha.
pageSizeBidirecionalnumber0Linhas por página, ou 0 para uma única lista rolável.
pageBidirecionalnumber0A página mostrada, a partir de 0.
pageSizesInputnumber[][10, 25, 50, 100]As opções do paginador.
virtualInputboolean | 'auto''auto'Renderiza só as linhas visíveis: sempre, nunca, ou auto acima de 100 linhas sem paginação.
heightInputstringUm comprimento CSS que limita a grade; o conteúdo rola dentro dela.
columnStateBidirecionalNuiGridColumnState[][]A largura, a ordem, a fixação e a visibilidade de cada coluna, para salvar e restaurar.
modeInput'client' | 'server''client'server mostra as linhas conforme chegam e deixa a ordenação, a filtragem e a paginação com você.
totalInputnumberO número de linhas no servidor.
loadingInputbooleanfalseMostra uma barra de progresso, e linhas provisórias enquanto não há nenhuma.
localeInputstringLOCALE_IDFormata números e datas, e lê números digitados.
labelsInputPartial<NuiGridLabels>Todo texto que a grade mostra ou anuncia, para traduzir.
cornersInputNuiCornersO formato dos cantos: round, squircle, bevel, scoop, notch ou square.
radiusInputNuiRadiusO tamanho dos cantos: none, small, medium, large ou full.
densityInputNuiDensityQuanto espaço ele ocupa: compact, regular ou roomy.
rowActivateOutputTEmite uma linha aberta com Enter ou com um clique duplo.
cellEditOutputNuiGridEdit<T>Emite cada edição confirmada.
queryChangeOutputNuiGridQueryEmite a ordenação, os filtros, a busca e a página sempre que mudam.
exportCsvMétodo(options?) => stringAs linhas filtradas e ordenadas das colunas visíveis, em CSV.
focusCellMétodo(row: number, col: number) => voidMove o foco para uma célula; a linha -1 é o cabeçalho.
clearFiltersMétodo() => voidLimpa todos os filtros e a busca.

Os inputs 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. Só id e header são obrigatórios.

NomeTipoPadrãoDescrição
idPropriedadestringÚnico; a chave na ordenação, nos filtros e no estado das colunas.
headerPropriedadestringO texto do cabeçalho.
valuePropriedadekeyof T | ((row: T) => V)Uma chave da linha, ou uma função da linha. O padrão é row[id].
typePropriedade'text' | 'number' | 'date' | 'boolean' | 'enum''text'Define o alinhamento, a ordenação, o filtro e o editor.
formatPropriedadeIntl options | ((value, row) => string)Opções de Intl para números e datas, ou uma função que gera o texto.
optionsPropriedadeNuiOption<V>[]As opções de uma coluna enum, como objetos NuiOption.
width, minWidth, maxWidthPropriedadenumberEm pixels.
flexPropriedadenumberDivide o espaço restante com as outras colunas flex.
alignPropriedade'start' | 'center' | 'end'O padrão depende do tipo: números e datas no final.
pinned, hiddenPropriedade'start' | 'end', booleanA fixação e a visibilidade iniciais da coluna.
sortable, filterable, resizable, reorderable, hideablePropriedadebooleantrueCada uma pode ser desativada com false.
comparePropriedade(a: V, b: V) => numberUma ordenação personalizada.
editable, validatePropriedadeboolean | ((row) => boolean), (value, row) => string | nullSe as células podem ser editadas, e uma mensagem quando um valor não é válido.
setPropriedade(row: T, value: V) => TCria a linha editada. O padrão é uma cópia com o novo valor.

NuiGridCell

Desenha as células de uma coluna. O contexto contém a linha, o valor e o texto.

Seletor
ng-template[nuiGridCell]
NomeTipoPadrãoDescrição
nuiGridCellInputstringO id da coluna.

NuiGridHeader

Desenha o cabeçalho de uma coluna.

Seletor
ng-template[nuiGridHeader]
NomeTipoPadrãoDescrição
nuiGridHeaderInputstringO id da coluna.

NuiGridEmpty

O que aparece quando não há linhas. O contexto informa se os filtros as ocultaram.

Seletor
ng-template[nuiGridEmpty]