Seus usuários já sabem usar: conheça o Intelligent Grid
Em muitos sistemas, o botão mais usado é o "Exportar para Excel". O Intelligent Grid leva a planilha para dentro do seu produto, feito sobre o SorlaDB: 100 mil linhas a 60 fps, 137 funções do Excel e dados ao vivo, em 56 kB.
Pergunte a qualquer equipe de financeiro ou operações qual botão ela mais clica no seu sistema. Em um número surpreendente de empresas, a resposta sincera é Exportar para Excel.
Não é que as pessoas adorem exportar. É que a tela à frente delas não faz o que elas precisam: somar uma coluna filtrada, testar uma fórmula, colar um bloco de outra planilha, desfazer um erro. Então os dados saem do sistema, e cada exportação vira uma cópia que você não controla mais. Na sexta-feira existem cinco versões do mesmo relatório em cinco caixas de e-mail, nenhuma atualizada, e uma delas com dados de clientes que nunca deveriam ter saído de casa.
As equipes tentam resolver isso construindo "uma tabela melhor". Meses depois, têm ordenação, um ou dois filtros e um backlog cheio de pedidos que soam todos como "dá para funcionar igual ao Excel?".
O Intelligent Grid é a nossa resposta a esse pedido: um grid de dados no estilo Excel para o navegador, open source e feito sobre o SorlaDB.
O que muda para o negócio
- Sem treinamento. Intervalos, alça de preenchimento, Ctrl+C / Ctrl+V do Excel, desfazer, localizar e substituir, AutoFiltro. As pessoas usam no primeiro dia porque usam isso há anos.
- Os dados ficam dentro do sistema. Fórmulas, totais, agrupamentos e subtotais acontecem no produto, com as suas permissões e a sua trilha de auditoria. Quando alguém realmente precisa de um arquivo, a exportação XLSX mantém fórmulas de verdade do Excel, não valores colados.
- Rápido com volumes reais. 100.000 linhas abrem em menos de meio segundo e rolam a 60 quadros por segundo, porque só as linhas na tela são desenhadas.
- Menos para construir e manter. Um componente, 56 kB compactado, licença MIT, com tipos TypeScript e textos em inglês e português. A sua equipe gasta tempo nas regras do negócio, não reinventando uma planilha.
Uma planilha de verdade
Este é um grid ordenável, filtrável e editável, com coluna calculada, totais, barras de dados, desfazer, copiar e colar do Excel, exportação CSV e XLSX e rolagem virtual:
import { IntelligentGrid } from '@andmarruda/intelligent-grid';
import '@andmarruda/intelligent-grid/styles.css';
import sorla from 'sorla-db';
new IntelligentGrid('#orders', {
sorla,
idField: 'id',
editable: true,
data: await fetch('/api/orders').then((r) => r.json()),
columns: [
{ field: 'product', title: 'Produto', validate: { required: true } },
{ field: 'qty', title: 'Qtd', type: 'integer', footer: 'sum', conditionalFormats: [{ type: 'dataBar' }] },
{ field: 'price', title: 'Preço', type: 'currency' },
{ field: 'total', title: 'Total', type: 'currency', formula: '=[@qty]*[@price]', footer: 'sum' }
]
});
As fórmulas usam referências estruturadas, como nas tabelas do Excel. São 137 funções, de SUMIFS e XLOOKUP a NETWORKDAYS, e as pessoas podem digitar =… em qualquer célula editável:
columns: [
{ field: 'share', type: 'percent', formula: '=[@total]/SUM([total])' },
{ field: 'status', formula: '=IF([@total]>1000,"VIP",IF([@total]>100,"Regular","Pequeno"))' },
{ field: 'late', type: 'boolean', formula: '=AND(NOT([@paid]),[@due]<TODAY())' }
]
Filtros que as pessoas entendem, consultas que o backend executa
Além do AutoFiltro do Excel e de uma caixa de busca, há um construtor visual de consultas com grupos E / OU / NÃO aninhados. O mais interessante é o que ele produz: uma consulta find() no estilo MongoDB.
grid.toSorlaQuery();
// { $and: [{ paid: false }, { $or: [{ total: { $gt: 300 } }, { $and: [ … ] }] }] }
Esse JSON roda do jeito que está no SorlaDB, no navegador, e no MongoDB ou no SorlaDB, no seu servidor. O filtro que um gestor monta na tela é a mesma consulta que a sua API executa. Ninguém precisa traduzir nada.
Feito para formulários e APIs
Toda edição, colagem, inclusão e exclusão é registrada, então salvar significa enviar só o que mudou, não a tabela inteira:
grid.getChanges();
// { inserted: [ … ], updated: [{ id: '1', changes: { qty: { from: 2, to: 4 } }, row: { … } }], deleted: [ … ] }
await api.save(grid.getChangesJSON());
grid.acceptChanges(); // os valores salvos viram o novo original
Dados ao vivo, dados em volume
O Intelligent Grid fala os mesmos protocolos de servidor que o SorlaDB:
- Rolagem infinita por
fetchou WebSocket, com ordenação e filtros enviados ao servidor como JSON defind(), e linhas alteradas por outras pessoas atualizadas no lugar. Se alguém tem uma edição não salva naquela linha, o valor dela é mantido. (Dados ao vivo com WebSockets) - Server-Sent Events para carregar 100.000 linhas em blocos de 5.000, com progresso, enquanto a pessoa já ordena e filtra. (O fim da tela de carregamento)
A história por trás dos números
O Intelligent Grid nasceu como o teste mais difícil que podíamos dar ao SorlaDB. Construímos o grid sobre o SorlaDB 1.0, e ele encontrou na hora 16 problemas na biblioteca, de uma ordenação que sempre dava erro a consultas aninhadas que quebravam.
Todos foram corrigidos no próprio SorlaDB, entre as versões 1.1 e 1.7.1, e a suíte de testes do SorlaDB cresceu de 45 para 227 testes, incluindo 500 consultas aninhadas aleatórias conferidas contra uma implementação de referência. A lista completa está no histórico de versões.
Essas correções, junto com duas mudanças no próprio grid (calcular fórmulas de coluna inteira uma vez só, em vez de uma vez por linha, e desenhar só as linhas visíveis), aparecem nos benchmarks. O mesmo cenário de 12 colunas, com fórmulas que dependem de todas as linhas:
| 100.000 linhas | antes | depois | |
|---|---|---|---|
| abrir o grid | 237,9 s | 447 ms | 532× mais rápido |
| editar uma célula e recalcular | 84,5 s | 200 ms | 422× mais rápido |
| rolar | 60 fps | cerca de 30 linhas no DOM |
É dessa parte que temos mais orgulho: construir um produto de verdade sobre o SorlaDB deixou o SorlaDB melhor para todo mundo que usa.
A conclusão para quem lidera
Se as telas mais importantes do seu sistema terminam em "Exportar para Excel", a exportação não é o recurso que as pessoas querem. É um sintoma. Entregue a planilha dentro do produto e você ganha trabalho mais rápido, dados que continuam sob controle e uma equipe que para de reconstruir tabelas.
O Intelligent Grid é open source sob a licença MIT. Instale com npm install @andmarruda/intelligent-grid sorla-db, e veja a documentação completa, em inglês e português, no GitHub.
