Dimensionar tabelas e organizar o cálculo das métricas

A tabela que roda bem com 30 linhas de teste engasga quando um cliente abre a mesma tela com 30 mil. O degrau certo se escolhe medindo o volume real no computador mais fraco disponível. Quem decide a tela de dados da própria empresa fica com cinco degraus, o momento de calcular cada número e o relatório offline.

O primeiro degrau é a tabela nativa do navegador, o <table> de sempre. Custa quase nada, nasce acessível e aguenta poucos milhares de linhas com algarismos tabulares (dígitos de largura igual, que alinham em coluna) e folha de impressão.

Vem depois a tabela virtualizada, que desenha só as linhas visíveis no momento, como a vitrine que troca de produto conforme você anda. Essa virtualização vai confortável até perto de 100 mil linhas, com o TanStack Virtual. O preço é que a busca do navegador só acha o que está desenhado naquele instante.

Em React, a base desse degrau é a TanStack Table v9. Ela é headless, ou seja, calcula ordenação, filtro e paginação e deixa o desenho com você, como um motor sem carroceria. Paginação é quebrar a lista em páginas de tamanho fixo, para o navegador não carregar tudo de uma vez.

O terceiro degrau é a grade que calcula, a tabela que faz conta dentro da própria célula. O AG Grid trouxe fórmulas e totais por grupo, e vira uma mini-planilha sem passar pelo Excel. MUI X Data Grid e Mantine DataTable resolvem o mesmo quando o design system, a caixa de peças da marca, já é esse.

Milhões de células pedem canvas. O Glide Data Grid desenha em pixels e, por isso, exige uma camada ARIA paralela, as etiquetas que descrevem cada célula ao leitor de tela. O desenho em si devolve nada a quem não enxerga.

Pivô é a tabela que cruza duas dimensões e soma o que cai em cada cruzamento. O AntV S2 monta um com milhões de células em menos de quatro segundos. O VTable faz o mesmo e deixa abrir cada total até a linha que o originou.

Planilha de verdade, com fórmula, tabela dinâmica e edição a várias mãos, é outro produto e outro orçamento. O Univer é o sucessor oficial do Luckysheet, que foi declarado sem manutenção, e o Fortune-sheet é o caminho de migração com menos atrito.

A frequência com que o número muda decide quando ele é calculado. Se muda uma vez por dia, calcule antes de publicar e sirva um retrato pronto, leve e imprimível. Se muda com o filtro de quem lê, consulte a fonte a cada visita e aceite que a infraestrutura cresce com a audiência.

Se muda várias vezes por segundo, como cotação ou telemetria, um motor dentro do navegador absorve o fluxo sem redesenhar a tela inteira. Escreva a fórmula de cada indicador uma vez só, no arquivo que todas as telas leem, como a aula anterior mostra. Todo número responde em dois cliques de onde veio: origem, data, responsável e definição.

O relatório offline seguro é um arquivo HTML único que carrega o banco de dados dentro do próprio navegador. Wasm é código compilado que roda na página quase na velocidade de um programa instalado, como um motor de aplicativo dentro do navegador.

Com cerca de 400 KB comprimidos, o SQLite Wasm basta para guardar tabelas e consultá-las no aparelho. O PGlite é um Postgres real em Wasm, com cerca de 3,3 MB, e só compensa quando você precisa mesmo dos tipos e das extensões do Postgres.

Já o DuckDB-Wasm segue defasado do núcleo nativo, e por isso não conte com paridade de recursos ao planejar o relatório.

Numa distribuidora, a lista de pedidos do mês roda na tabela nativa, e o histórico de anos pede o TanStack Virtual. A tabela de preço com margem por cliente pede a fórmula do AG Grid. O representante que visita cliente sem sinal leva o relatório de estoque num HTML único com SQLite Wasm, e fecha o pedido na hora.

Antes de aprovar a próxima tela pesada, gere um arquivo de teste com o volume real esperado. Abra a tela no computador mais fraco disponível. Escolha o degrau pela tabela desta aula, nunca pelo nome da biblioteca. Deu certo quando a rolagem não engasga e cada número mostra origem, data e responsável em dois cliques.

Guia prático: tabela como placar, especificada antes de pedir

Tabela pedida por adjetivo volta com colunas a mais, números desalinhados e nenhuma ideia do que aparece quando falta dado. A biblioteca de 648 prompts estudada em 07/10/2026 dá a pista do método: 163 prompts usam "exatamente" para fixar quantidades, e os que desenham placar ou tabela comparativa nomeiam cada coluna e fixam o número de linhas, como cinco colunas com nome e dez linhas num ranking. Se até um modelo de imagem precisa disso para acertar, o agente que escreve a sua tabela também.

O template de painel contábil da galeria, estudado no mesmo dia, mostra o que acontece sem essa especificação. A tabela de contadores tem sete colunas (contador, equipe, clientes, abertas, em atraso, SLA e ações), mas é feita com caixas em grade, sem elemento table: o leitor de tela não sabe que é uma tabela, e o projeto inteiro tem zero atributos aria e zero role. A página não tem nenhuma variação para celular, com 80 pixels fixos de margem lateral e quatro cartões lado a lado. Só a coluna de ações se alinha à direita, e o projeto soma 39 usos de texto de 10 a 12 pixels.

O que o template acerta merece cópia: um estado vazio completo, com título, explicação e duas ações (cadastrar um a um ou importar planilha), e um aviso de configuração incompleta que diz o que fazer. A lição: escreva a tabela como placar antes de pedir, com colunas, alinhamento, formato de cada número e os três estados.

Aplicar os recursos ao projeto