Présentation sur HN : DataSheetGrid, un composant React au format Airtable

Présentation de React Datasheet Grid

• React Datasheet Grid est un composant React similaire à Airtable, qui permet de créer de magnifiques feuilles de calcul.
• Partenariat avec Tggl.io, qui aide les équipes produit et techniques à lancer plus rapidement des produits de meilleure qualité et à améliorer les taux de conversion.
• Fournit le composant DataSheetGrid, simple à utiliser : il suffit de le connecter à l’état.

Facilité d’utilisation

• React Datasheet Grid est plus facile à utiliser qu’un <input />.
• Permet de gérer et de modifier l’état des lignes du tableur avec useState.

Performances

• Vitesse optimisée grâce à une architecture virtualisée, capable de gérer facilement plusieurs centaines de milliers de lignes.
• Performances optimisées avec un rendu minimal ; suivez le guide de performance pour tirer le maximum de DSG.

Personnalisation

• Permet de contrôler tous les comportements du tableur, d’implémenter vos propres widgets et de personnaliser le style de DSG pour l’adapter à votre application.

Richesse fonctionnelle

• Prend en charge le copier-coller depuis Excel, Google Sheets, Notion, etc.
• Prise en charge complète de la navigation clavier et des raccourcis.
• Prise en charge du clic droit et des menus contextuels personnalisés.
• Prise en charge du glisser du coin pour étendre la sélection.
• Animations fluides.
• Construit avec Typescript.

L’avis de GN⁺

Le plus important avec React Datasheet Grid, c’est sa facilité d’utilisation, ses excellentes performances, ses possibilités de personnalisation et sa richesse fonctionnelle. Ce composant peut permettre aux développeurs d’implémenter rapidement et efficacement des fonctions de tableur, contribuant ainsi à améliorer l’expérience utilisateur et à réduire le temps de développement produit. Pour ces raisons, cela peut devenir un outil très intéressant pour les développeurs logiciels.

[GN⁺]

Commentaires Hacker News

• C'est une décision très judicieuse d'avoir axé l'objectif du projet non pas sur la course aux fonctionnalités, mais sur la facilité d'extension.

  • Cela rappelle une expérience passée dans un projet où il fallait choisir un composant de grille de données avec des fonctionnalités « façon Excel » voulues par les clients. Il y avait d'innombrables petites fonctionnalités, et chaque client voulait un sous-ensemble différent.
  • Beaucoup de composants sont complexes, mais les attentes envers une grille sont d'un tout autre niveau.
  • Personne ne peut tout faire, et il est sage de s'appuyer sur l'aide de la communauté.

• Cette semaine, nous avons commencé à utiliser dans un projet une interface « édition de chaque ligne dans une boîte de dialogue » en remplacement d'un mode d'édition de tableau inline. Cela a très bien fonctionné tel quel, et j'ai écrit mon propre composant de colonne pour gérer la validation avec un popover sur chaque cellule.

  • La fonctionnalité de redimensionnement des colonnes n'est pas intégrée (mais ce n'est pas vraiment gênant à l'usage).
  • J'aurais voulu désactiver la possibilité de sélectionner des lignes ou des colonnes en cliquant sur l'en-tête ou la gouttière. Ce n'est peut-être pas un besoin assez courant pour être intégré à la bibliothèque.

• Le composant DataSheetGrid est considéré comme le Graal de l'UX/UI, mais il est vraiment complexe d'y inclure tous les détails. Je lui souhaite toute la réussite et tout le financement possible. On voit cette histoire se répéter, que ce soit sur le web ou sur desktop, au-delà même de la plateforme de base.

• Ce composant a l'air bien, mais il lui manque quelques fonctionnalités clés présentes dans Airtable ou MUI DataGrid (tri/filtrage, gel des lignes/colonnes, ligne d'agrégation, pivot, etc.).

  • Cela reste néanmoins un bon concept, et bonne chance pour construire un concurrent OSS crédible.

• À première vue, ça a l'air chouette, mais le texte héro qui change en permanence en haut de la page fait bouger la page de haut en bas, ce qui rend le reste difficile à lire. (sur Firefox iOS)

• Quelqu'un se souvient-il de ce qui est arrivé à DataTables ? Cet outil était mauvais mais tellement utilisé que son auteur faisait payer le support.

• La façon dont le rectangle de focus se déplace réellement d'un endroit à l'autre quand on clique sur une autre cellule est agaçante. Si on clique quelques cases plus loin, on peut voir le rectangle de focus bleu filer rapidement vers la nouvelle cible. Google ne fait pas ça.

• Ce composant a vraiment l'air très bien, et j'en aurais eu besoin il y a un mois. Je vais l'essayer.

• Sur iOS, on ne peut pas coller dans une cellule, mais on peut taper. Est-ce le comportement prévu ou un bug ? Le collage fonctionne-t-il sur la version desktop ?

• Merci à @nick-keller. J'ai découvert ça il y a un mois, et cela semblait très prometteur. La sélection de plage est disponible par défaut (fonctionnalité pro sur certaines solutions alternatives), et les cellules sont personnalisables. En revanche, il n'y a pas de démo montrant ce qu'il est réellement possible de faire, donc les meilleurs exemples ne sont montrés qu'en captures d'écran sur la landing page de la section « personnalisable ». J'ai eu du mal à créer des en-têtes personnalisés et des menus d'en-tête, puis je suis passé à AG-Grid où j'ai implémenté ma propre sélection de plage.