Como ele é
Parece uma planilha arrumada de sistema de gestão. No topo ficam o título com o total de linhas, etiquetas removíveis para cada ordenação e filtro ativos e os botões de desfazer, refazer e exportar CSV. O cabeçalho fica preso no alto, as primeiras colunas ficam presas à esquerda e a linha de totais fica presa embaixo, enquanto o resto rola. Por padrão, o status aparece em etiquetas coloridas, os valores em reais e as datas no formato brasileiro. Arrastar o mouse marca um retângulo de células, e o rodapé mostra a soma e a média. Fundo quase branco, texto azul-marinho e destaque anil.
Você pode estar procurando isto se pediu algo assim
- tabela tipo Excel dentro do meu sistema que aguente muitas linhas
- lista de pedidos com filtro em cada coluna e ordenação por mais de uma
- copiar do Excel e colar direto na tabela do sistema
- tabela que não trava com 100 mil registros
- grade editável com validação, desfazer e totais no rodapé
- backoffice com tabela de dados profissional e botão de exportar CSV
- tabela que dá para navegar só com as setas do teclado
Também chamado de
- data grid
- tabela de dados
- tabela virtualizada
- virtualized table
- grade editável
- editable data table
- spreadsheet grid
Quando usar
- Backoffice de pedidos, estoque ou cadastros com milhares de registros
- ERPs e sistemas de governo em que a equipe cola dados vindos de planilhas
- Sistemas de saúde e de atendimento que precisam editar linhas com validação
- Relatórios operacionais com filtro por coluna, totais e exportação CSV
Quando evitar
- Cálculos com fórmulas entre células, que pedem uma planilha de verdade
- Listas curtas, de poucas linhas, em que uma tabela HTML simples resolve
- Celular como tela principal, já que muitas colunas exigem rolagem lateral
Como pedir para a sua IA
Troque a tabela de pedidos do meu backoffice por um data grid virtualizado: colunas fixas, filtro por coluna, ordenação múltipla, edição com validação, copiar e colar com planilhas, totais no rodapé, exportação CSV, navegação completa por teclado e formatação em pt-BR.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Data Grid
O Data Grid aguenta 100 mil linhas sem travar?
Foi feito para isso. O Data Grid desenha só as células visíveis e usa a rolagem nativa do navegador, então a página tem quase o mesmo número de elementos com 100 mil linhas ou com algumas dezenas. A especificação mira 60 quadros por segundo; em máquinas fracas, compare o INP antes e depois, como o prompt do THM Componentes pede.
Dá para colar dados do Excel no Data Grid?
Dá. O Data Grid lê o texto em formato de planilha da área de transferência, cola a partir da célula ativa e valida cada valor, ignorando e avisando os inválidos e as colunas só de leitura. Ctrl+C copia a seleção do mesmo jeito, e cada colagem pode ser desfeita com Ctrl+Z.
Como ligo o Data Grid aos dados reais do meu sistema?
Passe as suas linhas em rows e descreva as colunas em columns, com tipo, largura, edição, opções, limites e totais. O Data Grid altera os objetos recebidos ao editar e emite eventos de mudança, ordenação e filtro para você salvar na sua API. Sem rows, ele gera pedidos fictícios por semente.
