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

 (react-datasheet-grid.netlify.app)
2 points par GN⁺ 2023-11-13 | 1 commentaires | Partager sur WhatsApp
  • React Datasheet Grid est un composant permettant d’intégrer une interface de type tableur dans une application React, en reliant l’état et la définition des colonnes pour construire un écran de saisie de données
  • L’usage de base consiste à passer value, onChange et columns à <DataSheetGrid />, avec un flux plus simple qu’un <input /> classique
  • Grâce à une architecture virtualisée et à des optimisations de rendu minimales, il peut gérer plusieurs centaines de milliers de lignes, ce qui le rend adapté aux interfaces de tableaux volumineux
  • Il permet la personnalisation du comportement, des widgets et du style afin de répondre aux exigences produit
  • Il prend en charge le copier-coller depuis Excel, Google Sheets et Notion, la navigation au clavier, les menus contextuels, le glisser de zone de sélection, les animations, ainsi qu’une implémentation basée sur TypeScript

Aperçu de React Datasheet Grid

  • React Datasheet Grid est un composant conçu pour créer une interface de tableur dans React
  • NPM et GitHub sont proposés comme canaux d’installation et de diffusion
  • L’exemple d’utilisation de base consiste à connecter l’état React à value et onChange, puis à passer columns
    • const [rows, setRows] = useState([])
    • <DataSheetGrid value={rows} onChange={setRows} columns={columns} />

Utilisation et performances

  • Démarrage

    • Il suffit de relier l’état et les colonnes pour commencer à l’utiliser immédiatement
    • La documentation Getting started est disponible

  • Gestion de gros volumes

    • DSG est optimisé pour la vitesse et, grâce à son architecture virtualisée, peut traiter plusieurs centaines de milliers de lignes
    • Le rendu est optimisé au minimum, et des guides de performance sont proposés pour aller encore plus loin

  • Personnalisation

    • Il est possible de contrôler le comportement du tableur
    • Il est possible d’implémenter ses propres widgets
    • Il est possible de modifier le style de DSG pour l’adapter à l’application

Fonctionnalités prises en charge et documentation

  • Prise en charge du copier-coller avec Excel, Google Sheets et Notion
  • Prise en charge de la navigation au clavier et des raccourcis
  • Prise en charge du clic droit et des menus contextuels personnalisés
  • La zone de sélection peut être étendue en faisant glisser un coin
  • Animations fluides et implémentation en TypeScript
  • Documentation associée : Features, Examples, Reference

À lire aussi

1 commentaires

 
GN⁺ 2023-11-13
Avis sur Hacker News

  • Je pense que l’objectif du projet — ne pas entrer dans une course aux fonctionnalités, mais le rendre facilement extensible — est vraiment le bon choix.
    Il y a plus de dix ans, sur un projet, je devais choisir un composant de grille de données, et les clients voulaient des fonctionnalités « comme Excel ».
    La liste des fonctionnalités possibles que les fournisseurs de composants devaient construire était immense ; rien que les « petites » fonctionnalités individuelles dépassaient facilement les 200, et chaque client voulait un sous-ensemble différent.
    Des composants comme les sélecteurs de date/heure sont déjà complexes, mais les attentes autour d’une grille sont d’un tout autre niveau.
    Comme personne ne peut tout faire, la décision de laisser la communauté aider est très judicieuse.

    • Je serais curieux de savoir dans quel secteur ce projet était utilisé, si tu peux le partager.

  • J’ai commencé à l’utiliser cette semaine dans un projet, pour remplacer une interface où « chaque ligne est modifiée dans une boîte de dialogue » par un mode d’édition de tableau inline, et l’édition est devenue beaucoup plus rapide.
    On peut aussi coller des lignes, et ça fonctionne bien même dans l’état par défaut.
    J’ai écrit moi-même les composants de colonnes pour gérer la validation via un popover sur chaque cellule.
    Deux points m’ont posé problème : il n’y a pas de redimensionnement de colonnes intégré, et je voulais désactiver la sélection de lignes/colonnes en cliquant sur l’en-tête ou la gouttière.
    Pour le second point, je ne suis pas sûr que ce soit un besoin assez courant pour l’intégrer à la bibliothèque.

    • Merci pour le retour. DSG est un outil conçu pour faire au mieux les choses de base, et pour pouvoir être étendu comme l’utilisateur le souhaite.
      Le redimensionnement des colonnes a longtemps fait débat, mais je pense que cela va à l’encontre de l’idée de créer un outil simple et facile à utiliser.
      Le redimensionnement responsive des colonnes me semble être un meilleur compromis.
      La deuxième idée devrait en fait être assez simple à implémenter.
    • Le redimensionnement des colonnes est une fonctionnalité assez courante, donc j’imagine qu’elle sera probablement ajoutée bientôt.

  • Les composants du type DataSheetGrid ressemblent au Graal de l’UX/UI, mais je me souviens que c’est vraiment complexe si l’on veut couvrir tous les détails.
    Je vous souhaite du succès et du financement.
    J’ai vu le même phénomène se répéter quelle que soit la plateforme sous-jacente, web ou desktop, et je garde un bon souvenir de choses comme [1].
    [1] https://www.infragistics.com/

    • Je suis d’accord. Pour saisir beaucoup de données répétitives, je pense que c’est la meilleure UI.
      Bien sûr, je ne prétends pas avoir inventé quoi que ce soit.
      Merci pour les mots gentils, et le financement de l’open source n’est pas facile.

  • À première vue ça a l’air bien, mais le texte hero en haut, qui change sans cesse, oscille entre 3 et 4 lignes, ce qui fait constamment bouger la page de haut en bas et rend le reste du contenu un peu difficile à lire.
    C’est le cas sur Firefox iOS.

    • Même problème ici, la page saute arbitrairement de haut en bas et c’est très agaçant à regarder.
      Ça se produit sur iOS Safari.
    • Merci à tous ceux qui ont signalé ce problème. Je ne l’avais jamais rencontré moi-même, je vais le corriger bientôt.
    • En fait, ça s’affiche correctement sur Firefox iOS.

  • C’est correct, mais il manque quelques fonctionnalités clés de choses comme Airtable ou MUI DataGrid : tri/filtrage, lignes/colonnes figées, lignes d’agrégation, pivot, etc.
    Le concept est bon, et j’espère que vous parviendrez à construire un vrai concurrent open source aux composants propriétaires.

    • Merci pour le retour. DSG n’a pas été créé pour rivaliser sur les fonctionnalités, mais pour viser la meilleure UX/UI possible et l’extensibilité.
      Ces aspects doivent donc être implémentés soi-même.
      Idéalement, il y aurait un package npm pour chaque grosse fonctionnalité, mais pour cela il faudrait que le projet attire beaucoup plus d’attention.

  • Qu’est-il arrivé à DataTables ? Quelqu’un s’en souvient ? Comme cet outil était à la fois médiocre et utilisé partout, son auteur facturait du support.

    • Je l’utilise encore, et il reste plutôt excellent.
      L’auteur l’a maintenu pendant plus de 10 ans avec une rétrocompatibilité parfaite.
      Nous l’avons maintenant enveloppé dans React, puis réécrit en React ensuite, mais nous avons conservé la même API de communication pour ne pas avoir à modifier l’endpoint serveur.
    • Heureusement, il semble avoir été largement relégué au second plan avec jQuery.

  • Suis-je le seul à être gêné par la façon dont le rectangle de focus se déplace réellement d’un endroit à un autre quand on clique sur une autre cellule ?
    Quand on clique sur une cellule à quelques cases de distance, on voit particulièrement bien le rectangle de focus bleu glisser vers la nouvelle cible.
    Google ne fait pas ça.

  • C’est bien fait et agréable visuellement, mais j’aimerais que toutes les nouveautés ne soient pas basées sur React.
    Où puis-je trouver de nouveaux outils web sympa à utiliser dans mes projets sans avoir à adopter la folie complexe de React ?
    Je n’aime pas trop l’approche qui consiste à installer quelque chose avec npm.

  • @nick-keller, merci de l’avoir créé. Je l’ai découvert il y a un mois et ça semblait assez prometteur.
    Il inclut par défaut la sélection de plages, qui est une fonctionnalité payante dans certaines alternatives, et les cellules peuvent aussi être personnalisées.
    Cela dit, l’exemple qui montre le mieux ce qu’on peut construire avec est la capture d’écran de la section « customizable » de la landing page, mais il n’y a pas de démo montrant que c’est réellement possible.
    J’ai rencontré des difficultés en créant des en-têtes personnalisés et des menus d’en-tête, donc je suis passé à AG-Grid, et j’ai implémenté moi-même la sélection de plages.

    • Je devrais peut-être implémenter davantage d’exemples. Ça me semble être la façon la plus efficace d’aider les gens.

  • Sur iOS, il semble impossible de coller dans une cellule, mais la saisie fonctionne.
    Je me demande si c’est le comportement prévu ou un bug.
    Est-ce que le collage fonctionne sur la version desktop ?