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.

O segundo desenha só as linhas visíveis, técnica chamada virtualização, como a vitrine que troca o produto conforme você anda. O TanStack Virtual entra a partir de algumas centenas de itens e vai confortável até perto de 100 mil linhas. O preço: a busca do navegador só acha o que está desenhado.

Em React, a base do segundo degrau é a TanStack Table v9, estável desde 4 de agosto de 2026. Ela é headless (calcula ordenação, filtro e paginação e deixa o desenho com você, como um motor sem carroceria). As extensões só entram no pacote quando usadas, e o estado fica no TanStack Store. Escolha quando o peso do pacote importa.

O terceiro degrau é a grade que calcula. O AG Grid 35 e 36 trouxe fórmulas nativas e agregação customizada: a grade vira mini-planilha sem exportar para o Excel. MUI X Data Grid e Mantine DataTable fazem o mesmo trabalho quando o design system (a caixa de peças padronizadas da marca) do projeto já é esse.

Milhões de células pedem canvas. O Glide Data Grid desenha em pixels e 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.

O AntV S2 faz pivô com milhões de células em menos de quatro segundos e foi proposto como plugin nativo do Apache Superset. O VTable, do mesmo ecossistema do VChart, traz drill-down.

Planilha de verdade, com fórmula, tabela dinâmica e edição a várias mãos, é outro produto. O Univer é o sucessor oficial do Luckysheet, declarado sem manutenção, com pivôs, colaboração, importação e exportação. O Fortune-sheet é o fork em TypeScript para migrar 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 do board mostra. Todo número responde em dois cliques de onde veio: origem, data, responsável e definição.

O relatório offline seguro é um HTML único com o banco dentro do navegador e os dados locais. Wasm é código compilado que roda no navegador quase na velocidade nativa, como um motor de aplicativo dentro da página. O SQLite Wasm 3.53 pesa cerca de 400 KB comprimidos, com o sistema de arquivos opfs-wl, para armazenamento estruturado leve.

O PGlite 0.5.8 é um Postgres 16 real em Wasm, com cerca de 3,3 MB; escolha quando extensões e tipos do Postgres justificam o peso. O DuckDB-Wasm segue defasado do núcleo nativo, na base 1.5.4 com Arrow 17, e não conte com paridade de versão.

O DuckDB 2.0, com leitura e escrita assíncronas, está previsto para o fim de 2026 sem confirmação de chegada ao Wasm.

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, com a limitação de processador ligada. Escolha o degrau pela tabela desta aula, nunca pelo nome da biblioteca, e exija que cada número mostre origem, data e responsável em dois cliques.