Apresentando no HN: componente React no estilo Airtable, DataSheetGrid

• React Datasheet Grid é um componente para inserir uma UI em estilo de planilha em apps React, permitindo montar telas de entrada de dados conectando estado e definição de colunas
• O uso básico consiste em passar value, onChange e columns para <DataSheetGrid />, buscando um fluxo mais simples do que um <input /> comum
• Com arquitetura virtualizada e otimizações de renderização mínima, consegue lidar com centenas de milhares de linhas, sendo adequado para UIs de tabelas de grande porte
• É possível controlar comportamento, widgets e estilo, permitindo customização de acordo com os requisitos do produto
• Suporta copiar/colar com Excel, Google Sheets e Notion, além de navegação por teclado, menu de contexto, arraste da área de seleção, animações e implementação baseada em TypeScript

---

Visão geral do React Datasheet Grid

• React Datasheet Grid é um componente para criar uma UI de planilha no React
• NPM e GitHub são oferecidos como canais de instalação e distribuição
• O exemplo básico de uso conecta o estado do React a value e onChange, e passa columns
  • const [rows, setRows] = useState([])
  • <DataSheetGrid value={rows} onChange={setRows} columns={columns} />

Usabilidade e desempenho

• Como começar

  • A estrutura permite uso imediato ao conectar estado e colunas
  • A documentação oferece Getting started

• Processamento em grande escala

  • O DSG é otimizado para velocidade e, graças à arquitetura virtualizada, pode processar centenas de milhares de linhas
  • A renderização é otimizada ao mínimo, e há guias de performance para extrair ainda mais desempenho

• Customização

  • É possível controlar o comportamento da planilha
  • É possível implementar widgets próprios
  • É possível alterar o estilo do DSG para combiná-lo com o app

Recursos suportados e documentação

• Suporta copiar/colar com Excel, Google Sheets e Notion
• Suporta navegação por teclado e atalhos
• Suporta clique com o botão direito e menus de contexto personalizados
• Permite expandir a área de seleção arrastando a alça do canto
• Oferece animações suaves e é implementado em TypeScript
• A documentação relacionada inclui Features, Examples e Reference

[GN⁺]

Comentários do Hacker News

• Acho que o objetivo do projeto de não competir em recursos, mas sim torná-lo facilmente extensível, é uma decisão muito acertada
  Há mais de 10 anos, precisei escolher um componente de grade de dados para usar em um projeto, e os clientes queriam funcionalidades “tipo Excel”
  A lista de recursos possíveis que os fornecedores de componentes teriam de criar era enorme; mesmo contando só recursos individuais “pequenos”, passava fácil de 200, e cada cliente queria um subconjunto diferente
  Componentes como seletores de data/hora também são complexos, mas as expectativas em cima de uma grade estão em um nível completamente diferente
  Como ninguém consegue fazer tudo, é muito sensato deixar a comunidade ajudar

  • Fiquei curioso: você pode compartilhar para qual setor era o projeto?

• Começamos a usar no projeto esta semana; foi para trocar uma interface de “editar cada linha em uma caixa de diálogo” por um modo de edição inline em tabela, e a edição ficou muito mais rápida
  Também passamos a conseguir colar linhas, e funciona bem mesmo no estado padrão
  Escrevemos nossos próprios componentes de coluna para lidar com validação via popover em cada célula
  Encontramos dois pontos: não há redimensionamento de colunas embutido, e queríamos desativar a seleção de linhas/colunas ao clicar no cabeçalho ou na gutter
  Não sei se este último é um requisito comum o bastante para entrar na biblioteca

  • Obrigado pelo feedback. O DSG é uma ferramenta feita para executar o básico da melhor forma possível e permitir que os usuários a estendam como quiserem
    O redimensionamento de colunas foi discutido por muito tempo, mas acho que vai contra a direção de criar uma ferramenta simples e fácil de usar
    Sinto que o redimensionamento responsivo de colunas é um compromisso melhor
    A segunda ideia, na prática, parece ser fácil de implementar
  • Redimensionamento de colunas é um recurso bem comum, então imagino que talvez seja adicionado em breve

• Componentes do tipo DataSheetGrid parecem o Santo Graal de UX/UI, mas lembro que são realmente complexos quando se tenta cobrir todos os detalhes
  Desejo sucesso e financiamento
  Já vi a mesma coisa se repetir independentemente da plataforma-base, seja web ou desktop, e tenho boas lembranças de coisas como [1]
  [1] https://www.infragistics.com/

  • Concordo. Para inserir muitos dados repetitivos, acho que é a melhor UI
    Claro que não estou dizendo que inventei nada
    Obrigado pelas palavras gentis, e financiamento de open source não é fácil

• À primeira vista parece bom, mas o texto hero no topo, que muda sem parar, fica alternando entre 3 e 4 linhas e faz a página inteira balançar para cima e para baixo, o que torna um pouco difícil ler o restante do conteúdo
  Acontece no Firefox iOS

  • Tenho o mesmo problema aqui, a página pula arbitrariamente para cima e para baixo e isso é muito irritante de ver
    Acontece no iOS Safari
  • Obrigado a todos que avisaram sobre esse problema. Eu nunca tinha esbarrado nele pessoalmente; vou corrigir em breve
  • No Firefox iOS, na verdade, aparece bem para mim

• É legal, mas faltam alguns recursos centrais de coisas como Airtable ou MUI DataGrid: ordenação/filtragem, congelamento de linhas/colunas, linhas de agregação, pivô etc.
  O conceito é bom, e espero que consigam construir um concorrente open source de verdade para componentes proprietários

  • Obrigado pelo feedback. O DSG não foi feito para competir em recursos, mas para buscar a melhor UX/UI possível e extensibilidade
    Por isso, essas partes precisam ser implementadas por você
    O ideal seria que cada recurso grande virasse um pacote npm, mas, para isso, o projeto teria de receber muito mais atenção

• O que aconteceu com o DataTables? Alguém se lembra? Como aquela ferramenta era ruim e ao mesmo tempo estava em todo lugar, o autor costumava cobrar por suporte

  • Ainda uso, e continua bem excelente
    O autor manteve e cuidou dele por mais de 10 anos com compatibilidade retroativa perfeita
    Hoje embrulhamos em React e, depois, reescrevemos em React, mas mantivemos a API de comunicação para não precisar alterar os endpoints do servidor
  • Felizmente, parece ter ficado em grande parte para trás junto com o jQuery

• Sou só eu que acho incômodo o jeito como o retângulo de foco realmente se move de uma posição para outra quando se clica em outra célula?
  Quando clico em uma célula a algumas casas de distância, fica especialmente visível o retângulo de foco azul deslizando até o novo alvo
  O Google não faz assim

• Bem feito e bonito, mas eu gostaria que nem tudo que sai de novo fosse baseado em React
  Onde posso encontrar novas ferramentas legais para a web que eu possa usar nos meus projetos sem exigir a insanidade complexa do React?
  Não gosto muito do jeito de instalar coisas via npm

• @nick-keller, obrigado por criar isso. Conheci há um mês e parecia bem promissor
  Vem com seleção de intervalo por padrão, que em algumas alternativas é um recurso pago, e as células também podem ser customizadas
  Porém, o exemplo que melhor mostra o que é possível construir com isso é a captura de tela da seção “customizable” da landing page, mas não há uma demo mostrando que aquilo é de fato possível
  Tive dificuldades tentando criar cabeçalhos customizados e menus de cabeçalho, então migrei para o AG-Grid e implementei a seleção de intervalo por conta própria

  • Talvez eu precise implementar mais exemplos. Parece ser o jeito mais eficiente de ajudar as pessoas

• No iOS, parece que não dá para colar em uma célula, embora seja possível digitar
  Fico me perguntando se isso é comportamento intencional ou bug
  Na versão desktop, é possível colar?