# Data Grid Tabela que rola milhares de linhas sem travar, com filtros, ordenação, edição e copiar e colar com planilhas. > O Data Grid é um componente exclusivo do THM Componentes que coloca uma tabela de dados com cara de planilha no seu sistema: rola 100 mil linhas desenhando só as células visíveis, com colunas fixas, filtro por coluna, ordenação múltipla, edição com validação, copiar e colar com planilhas, totais e exportação CSV. Serve para ERPs, backoffice e sistemas de saúde. - Categoria: Aplicações e produtividade - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Canvas 2D - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/data-grid/ ## 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 ```text 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. ## Componentes relacionados - [Spreadsheet](https://vibecode.thmtecnologia.com/componentes/spreadsheet/): Planilha dentro do seu sistema, com células, barra de fórmulas e totais que se recalculam sozinhos. - [Pivot Table](https://vibecode.thmtecnologia.com/componentes/pivot-table/): Tabela que resume vendas por região, produto e trimestre; arraste os campos para mudar o cruzamento. - [Date Range](https://vibecode.thmtecnologia.com/componentes/date-range/): Calendário em português com dois meses lado a lado para escolher data inicial e final, com atalhos e feriados. - [Split Panes](https://vibecode.thmtecnologia.com/componentes/split-panes/): Tela dividida em áreas que você aumenta, diminui ou recolhe arrastando as linhas entre elas, como num editor de código. - [Command Palette](https://vibecode.thmtecnologia.com/componentes/command-palette/): Uma janela de busca que abre com Ctrl K ou ⌘K para achar páginas e executar ações sem tirar as mãos do teclado. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.