HN-Vorstellung: React-Komponente im Airtable-Stil, DataSheetGrid

 (react-datasheet-grid.netlify.app)
2 Punkte von GN⁺ 2023-11-13 | 1 Kommentare | Auf WhatsApp teilen
  • React Datasheet Grid ist eine Komponente, um eine tabellenkalkulationsartige UI in React-Apps einzubinden; durch das Verbinden von State und Spaltendefinitionen lässt sich eine Dateneingabemaske aufbauen
  • Die grundlegende Nutzung besteht darin, value, onChange und columns an <DataSheetGrid /> zu übergeben, mit einem bewusst einfacheren Ablauf als bei einem normalen <input />
  • Dank virtualisierter Architektur und auf minimale Render-Vorgänge optimierter Performance kann es Hunderttausende Zeilen verarbeiten und eignet sich damit für große Tabellen-UIs
  • Verhalten, Widgets und Styling lassen sich steuern, sodass Anpassungen an Produktanforderungen möglich sind
  • Unterstützt Copy-and-Paste mit Excel, Google Sheets und Notion sowie Tastaturnavigation, Kontextmenüs, das Ziehen von Auswahlbereichen, Animationen und eine auf TypeScript basierende Implementierung

Überblick über React Datasheet Grid

  • React Datasheet Grid ist eine Komponente zum Erstellen von Tabellenkalkulations-UIs in React
  • Als Installations- und Distributionskanäle werden NPM und GitHub angeboten
  • Das grundlegende Nutzungsbeispiel verbindet React-State mit value und onChange und übergibt columns
    • const [rows, setRows] = useState([])
    • <DataSheetGrid value={rows} onChange={setRows} columns={columns} />

Nutzbarkeit und Performance

  • Einstieg

    • Die Struktur ist so aufgebaut, dass sie sofort verwendet werden kann, sobald State und Spalten verbunden sind
    • Als Dokumentation steht Getting started bereit

  • Verarbeitung großer Datenmengen

    • DSG ist auf Geschwindigkeit optimiert und kann dank virtualisierter Architektur Hunderttausende Zeilen verarbeiten
    • Das Rendering ist auf ein Minimum optimiert, und für weitere Optimierungen gibt es performance guides

  • Anpassung

    • Das Verhalten der Tabellenkalkulation lässt sich steuern
    • Eigene Widgets können implementiert werden
    • Das Styling von DSG kann an die App angepasst werden

Unterstützte Funktionen und Dokumentation

  • Unterstützt Copy-and-Paste mit Excel, Google Sheets und Notion
  • Unterstützt Tastaturnavigation und Shortcuts
  • Unterstützt Rechtsklick und benutzerdefinierte Kontextmenüs
  • Auswahlbereiche lassen sich durch Ziehen an der Ecke erweitern
  • Bietet flüssige Animationen und ist in TypeScript implementiert
  • Als zugehörige Dokumentation stehen Features, Examples und Reference bereit

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2023-11-13
Kommentare auf Hacker News

  • Ich finde, die Projektentscheidung, nicht über Features zu konkurrieren, sondern es leicht erweiterbar zu machen, absolut richtig.
    Vor mehr als zehn Jahren musste ich für ein Projekt eine Data-Grid-Komponente auswählen, und die Kunden wollten „Excel-ähnliche“ Funktionen.
    Die Liste möglicher Features, die Komponenten-Anbieter bauen sollten, war enorm lang; allein bei den „kleinen“ Einzelfunktionen kam man leicht auf über 200, und jeder Kunde wollte eine andere Teilmenge davon.
    Auch Komponenten wie Date/Time Picker sind komplex, aber die Erwartungen an ein Grid sind auf einem völlig anderen Niveau.
    Niemand kann alles davon umsetzen, daher ist es sehr klug, die Community mithelfen zu lassen.

    • Mich würde interessieren, ob du sagen kannst, in welcher Branche dieses Projekt eingesetzt wurde.

  • Ich habe es diese Woche in einem Projekt eingeführt, um ein Interface, bei dem „jede Zeile in einem Dialog bearbeitet“ wurde, auf einen Inline-Tabellenbearbeitungsmodus umzustellen, und das Bearbeiten ist deutlich schneller geworden.
    Dinge wie das Einfügen von Zeilen sind jetzt ebenfalls möglich, und schon im Standardzustand funktioniert es gut.
    Die Spaltenkomponenten habe ich selbst geschrieben, weil ich die Validierung pro Zelle über Popovers abwickeln wollte.
    Auf zwei Punkte bin ich gestoßen: Es gibt keine eingebaute Spaltengrößenanpassung, und ich wollte die Möglichkeit deaktivieren, durch Klicken auf Header oder Gutter Zeilen/Spalten auszuwählen.
    Bei Letzterem bin ich mir nicht sicher, ob das ein so häufiger Wunsch ist, dass es in die Library gehört.

    • Danke für das Feedback. DSG ist ein Werkzeug, das grundlegende Dinge so gut wie möglich machen und Nutzern erlauben soll, es nach Wunsch zu erweitern.
      Über Spaltengrößenanpassung wurde lange diskutiert, aber ich denke, das passt nicht zur Richtung, ein einfaches, leicht zu verwendendes Tool zu bauen.
      Responsive Spaltengrößenanpassung fühlt sich für mich wie der bessere Kompromiss an.
      Die zweite Idee ließe sich tatsächlich wohl leicht umsetzen.
    • Spaltengrößenanpassung ist ein ziemlich übliches Feature, daher wird es vermutlich bald hinzugefügt.

  • Komponenten wie DataSheetGrid wirken wie der Heilige Gral von UX/UI, aber ich erinnere mich, dass es wirklich komplex wird, wenn man alle Details richtig haben will.
    Ich wünsche euch Erfolg und Funding.
    Ich habe gesehen, dass sich das unabhängig von der zugrunde liegenden Plattform, ob Web oder Desktop, immer wiederholt, und habe gute Erinnerungen an Dinge wie [1].
    [1] https://www.infragistics.com/

    • Stimme zu. Für die Eingabe vieler wiederkehrender Daten halte ich das für die beste UI.
      Natürlich behaupten wir nicht, etwas erfunden zu haben.
      Danke für die netten Worte, und Open-Source-Funding ist nicht leicht.

  • Auf den ersten Blick sieht es gut aus, aber der endlos wechselnde Hero-Text oben springt zwischen 3 und 4 Zeilen hin und her, wodurch die Seite ständig auf und ab wackelt und der Rest des Inhalts etwas schwer zu lesen ist.
    Das passiert in Firefox iOS.

    • Hier tritt dasselbe Problem auf; die Seite springt willkürlich nach oben und unten, was sehr nervig anzusehen ist.
      Passiert in iOS Safari.
    • Danke an alle, die auf dieses Problem hingewiesen haben. Ich bin selbst nie darauf gestoßen und werde es bald beheben.
    • In Firefox iOS sieht es tatsächlich gut aus.

  • Ganz okay, aber im Vergleich zu Airtable oder MUI DataGrid fehlen ein paar Kernfunktionen: Sortieren/Filtern, fixierte Zeilen/Spalten, Aggregationszeilen, Pivot usw.
    Das Konzept ist gut, und ich hoffe, dass daraus ein guter Open-Source-Konkurrent zu proprietären Komponenten wird.

    • Danke für das Feedback. DSG wurde nicht gebaut, um über Features zu konkurrieren, sondern mit dem Ziel bestmöglicher UX/UI und Erweiterbarkeit.
      Deshalb muss man solche Dinge selbst implementieren.
      Idealerweise gäbe es für jedes größere Feature ein npm-Paket, aber dafür müsste das Projekt deutlich mehr Aufmerksamkeit bekommen.

  • Was ist eigentlich aus DataTables geworden? Erinnert sich noch jemand daran? Weil dieses Tool zwar nicht besonders toll war, aber überall eingesetzt wurde, konnte der Autor Supportkosten verlangen.

    • Ich nutze es immer noch, und es ist nach wie vor ziemlich hervorragend.
      Der Autor hat es über mehr als 10 Jahre hinweg mit perfekter Abwärtskompatibilität gepflegt.
      Wir haben es inzwischen in React verpackt und später in React neu geschrieben, aber die Kommunikations-API beibehalten, damit wir die Server-Endpunkte nicht ändern mussten.
    • Zum Glück scheint es zusammen mit jQuery größtenteils in den Hintergrund gedrängt worden zu sein.

  • Bin ich der Einzige, den es stört, dass das Fokusrechteck beim Anklicken einer anderen Zelle tatsächlich von einer Position zur anderen wandert?
    Besonders auffällig ist es, wenn man eine ein paar Zellen entfernte Zelle anklickt und das blaue Fokusrechteck zum neuen Ziel hinübergleitet.
    Google macht das nicht so.

  • Gut gemacht und sieht schön aus, aber ich wünschte, nicht alles Neue wäre React-basiert.
    Wo finde ich neue, schicke Tools fürs Web, die ich in meinen Projekten verwenden kann, ohne den komplexen Wahnsinn von React zu benötigen?
    Ich mag die Art, Dinge per npm zu installieren, nicht besonders.

  • @nick-keller, danke fürs Bauen. Ich habe es vor einem Monat entdeckt, und es sah ziemlich vielversprechend aus.
    Bereichsauswahl ist standardmäßig enthalten, bei manchen Alternativen ist das ein kostenpflichtiges Feature, und Zellen lassen sich ebenfalls anpassen.
    Allerdings ist das Beispiel, das am besten zeigt, was man damit bauen kann, der Screenshot im Abschnitt „customizable“ auf der Landingpage; es gibt aber keine Demo, dass das tatsächlich möglich ist.
    Ich hatte Schwierigkeiten, Custom Header und Header-Menüs zu bauen, bin daher zu AG-Grid gewechselt und habe die Bereichsauswahl selbst implementiert.

    • Vielleicht sollte ich mehr Beispiele implementieren. Das scheint der effizienteste Weg zu sein, Menschen zu helfen.

  • Unter iOS scheint das Einfügen in Zellen nicht zu funktionieren, Eingaben aber schon.
    Ich frage mich, ob das beabsichtigt ist oder ein Bug.
    Funktioniert Einfügen in der Desktop-Version?