Apresentação no HN: DataSheetGrid, um componente React no estilo Airtable

Apresentação do React Datasheet Grid

• React Datasheet Grid é um componente React semelhante ao Airtable que permite criar planilhas bonitas.
• Parceria com a Tggl.io, que ajuda equipes técnicas e de produto a lançar produtos de melhor qualidade mais rapidamente e melhorar a taxa de conversão.
• Oferece o componente DataSheetGrid, que é simples de usar e exige apenas conectar o estado.

Facilidade de uso

• React Datasheet Grid é mais fácil de usar do que um <input />.
• É possível gerenciar e alterar o estado das linhas da planilha usando useState.

Desempenho

• Velocidade otimizada com arquitetura de virtualização, capaz de lidar facilmente com centenas de milhares de linhas.
• Desempenho otimizado com renderização mínima; siga o guia de performance para aproveitar ao máximo o DSG.

Possibilidades de customização

• Controle total sobre todos os comportamentos da planilha, com implementação de widgets próprios e customização do estilo do DSG para combinar com o app.

Rico em recursos

• Suporte a copiar e colar do Excel, Google Sheets, Notion e outros.
• Suporte completo a navegação por teclado e atalhos.
• Suporte a clique com o botão direito e menus de contexto personalizados.
• Suporte a arrastar pela alça de canto para expandir a seleção.
• Animações suaves.
• Construído com Typescript.

Opinião do GN⁺

O mais importante no React Datasheet Grid é que ele oferece facilidade de uso, excelente desempenho, possibilidades de customização e uma ampla variedade de recursos. Esse componente pode ajudar desenvolvedores a implementar funcionalidades de planilha de forma rápida e eficiente, contribuindo para melhorar a experiência do usuário e reduzir o tempo de desenvolvimento do produto. Por esses motivos, pode ser uma ferramenta muito interessante para desenvolvedores de software.

[GN⁺]

Comentários do Hacker News

• Foi uma decisão muito inteligente focar o objetivo do projeto em oferecer extensibilidade fácil, em vez de competir em funcionalidades.

  • Isso me fez lembrar de projetos anteriores em que precisei escolher um componente de grade de dados com recursos “tipo Excel” que os clientes queriam. Havia inúmeras pequenas funcionalidades, e cada cliente queria um subconjunto diferente delas.
  • Muitos componentes são complexos, mas as expectativas em relação a uma grade estão em um nível completamente diferente.
  • Ninguém consegue fazer tudo sozinho, e contar com a ajuda da comunidade é uma escolha sensata.

• Esta semana, comecei a usar isso em um projeto ao substituir uma interface de “editar cada linha em uma caixa de diálogo” por um modo de edição inline em tabela. Funcionou muito bem logo de cara, e escrevi meu próprio componente de coluna para lidar com validação usando popovers em cada célula.

  • Não há redimensionamento de colunas embutido (mas isso não é um grande problema para o uso).
  • Eu queria desativar a função de selecionar linhas ou colunas ao clicar no cabeçalho ou na sarjeta. Talvez isso não seja uma necessidade comum o suficiente para justificar integração na biblioteca.

• O componente DataSheetGrid é visto como o Santo Graal de UX/UI, mas é realmente complexo demais para incluir todos os detalhes. Desejo todo o sucesso e financiamento. Seja na web ou no desktop, vejo a mesma história se repetir além da plataforma base.

• Este componente parece bom, mas faltam alguns recursos principais de algo como Airtable ou MUI DataGrid (ordenação/filtragem, fixação de linhas/colunas, linha de agregação, pivô etc.).

  • Ainda assim, é um bom conceito, e desejo sorte na construção de um concorrente OSS à altura.

• À primeira vista parece legal, mas o texto principal no topo da página muda sem parar, fazendo a página balançar para cima e para baixo e dificultando a leitura do restante. (No Firefox do iOS)

• Alguém se lembra do que aconteceu com o DataTables? A ferramenta era ruim, mas tão amplamente usada que o autor cobrava pelo suporte.

• Me incomoda a forma como o retângulo de foco realmente se move de um lugar para outro ao clicar em outra célula. Se você clicar algumas células adiante, dá para ver o retângulo azul de foco correndo rapidamente até o novo destino. O Google não faz isso.

• Este componente parece realmente muito legal, e eu precisava disso há um mês. Vou experimentar.

• No iOS, não dá para colar em uma célula, mas dá para digitar. Isso é comportamento intencional ou um bug? Na versão desktop, colar funciona?

• Obrigado, @nick-keller. Encontrei isso há um mês e parece muito promissor. A seleção por intervalo funciona por padrão (em algumas soluções alternativas isso é recurso pro), e as células podem ser personalizadas. No entanto, não há uma demo mostrando que isso realmente é possível, então o melhor exemplo aparece apenas como captura de tela na landing page da seção “customizável”. Tive dificuldade para criar cabeçalhos personalizados e menus de cabeçalho, então migrei para o AG-Grid e implementei minha própria seleção por intervalo.