A grade de dados é uma tabela nativa com ordenação, filtros, paginação e edição. Descreva as columns, passe as rows, e cada célula é formatada pelo tipo e pela localidade: números, moedas, datas, sim e não, e rótulos para valores enum.
O estado dela fica em models que você pode vincular, salvar e enviar a um servidor: sort, filters, search, page, selected e columnState para as larguras, a ordem, as colunas fixadas e as ocultas que os usuários escolhem. Sem paginação, só as linhas visíveis são renderizadas, então 100.000 linhas rolam como dez.
Todas as células são alcançáveis pelo teclado, e o painel de cada coluna permite ordená-la, filtrá-la, fixá-la, movê-la, ajustá-la ao conteúdo e ocultá-la.
Busca, ordenação e paginação
Digite para buscar em todas as colunas. Clique em um cabeçalho para ordenar e use Shift + clique para adicionar uma segunda coluna. nuiGridCell desenha o status, e exportCsv() entrega o que está na tela.
Seleção
selection="multiple" adiciona caixas de seleção e vincula as chaves das linhas selecionadas. Shift + clique seleciona um intervalo; a caixa do cabeçalho seleciona todas as linhas que correspondem.
Edição
Clique duas vezes em uma célula, pressione Enter ou simplesmente digite. validate mantém o editor aberto com uma mensagem; uma edição confirmada atualiza rows e emite cellEdit.
100.000 linhas
Sem paginação, só as linhas visíveis são renderizadas. As colunas fixadas ficam nas bordas, e columnState guarda o layout que os usuários montam.
Dados do servidor
No modo server, a grade mostra as linhas conforme chegam e informa cada mudança em queryChange. Defina loading enquanto busca os dados.