HN-Vorstellung: Airtable-ähnliche React-Komponente, DataSheetGrid

 (react-datasheet-grid.netlify.app)
2 Punkte von GN⁺ 2023-11-13 | 1 Kommentare | Auf WhatsApp teilen

Einführung in React Datasheet Grid

  • React Datasheet Grid ist eine Airtable-ähnliche React-Komponente, mit der sich ansprechende Tabellen erstellen lassen.
  • Partnerschaft mit Tggl.io, um Technik- und Produktteams dabei zu helfen, schneller bessere Produkte zu veröffentlichen und die Conversion-Rate zu verbessern.
  • Bietet die einfach zu verwendende DataSheetGrid-Komponente, bei der nur der State angebunden werden muss.

Benutzerfreundlichkeit

  • React Datasheet Grid ist einfacher zu verwenden als <input />.
  • Mit useState lässt sich der Zeilenstatus der Tabelle verwalten und ändern.

Performance

  • Optimierte Geschwindigkeit dank virtualisierter Architektur, die problemlos Hunderttausende von Zeilen verarbeiten kann.
  • Performance-Optimierung durch minimales Rendering; mit dem Performance-Guide lässt sich die maximale Leistung von DSG ausschöpfen.

Anpassbarkeit

  • Kontrolle über jedes Verhalten der Tabelle, Implementierung eigener Widgets und Anpassung des DSG-Stils an die eigene App.

Funktionsumfang

  • Unterstützt Kopieren und Einfügen aus Excel, Google Sheets, Notion usw.
  • Vollständige Unterstützung für Tastaturnavigation und Shortcuts.
  • Unterstützung für Rechtsklick und benutzerdefinierte Kontextmenüs.
  • Unterstützung für das Ziehen an den Ecken zum Erweitern der Auswahl.
  • Sanfte Animationen.
  • Mit Typescript entwickelt.

Meinung von GN⁺

Am wichtigsten an React Datasheet Grid sind die einfache Nutzung, die starke Performance, die Anpassbarkeit und der große Funktionsumfang. Diese Komponente ermöglicht es Entwicklern, Tabellenfunktionen schnell und effizient umzusetzen, was zur Verbesserung der User Experience beitragen und die Produktentwicklungszeit verkürzen kann. Aus diesen Gründen kann sie für Softwareentwickler ein sehr interessantes Tool sein.

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2023-11-13
Hacker-News-Kommentare

  • Dass sich das Projektziel nicht auf Feature-Parität, sondern auf einfache Erweiterbarkeit konzentriert, ist eine sehr kluge Entscheidung.

    • Erinnert sich an ein früheres Projekt, in dem Datenraster-Komponenten mit den von Kunden gewünschten „Excel-ähnlichen“ Funktionen ausgewählt werden mussten. Es gab unzählige kleine Features, und jeder Kunde wollte eine andere Teilmenge davon.
    • Viele Komponenten sind komplex, aber die Erwartungen an Grids liegen auf einem völlig anderen Niveau.
    • Niemand kann alles allein leisten, daher ist es klug, sich Hilfe aus der Community zu holen.

  • Diese Woche wurde im Projekt begonnen, eine Oberfläche zum „Bearbeiten jeder Zeile in einem Dialog“ durch einen Inline-Tabellen-Bearbeitungsmodus zu ersetzen. Es funktionierte sofort gut und es wurden eigene Spaltenkomponenten geschrieben, die die Validierung jeder Zelle mit Popovers handhaben.

    • Eine Funktion zur Größenanpassung von Spalten ist nicht eingebaut (was aber kein großes Problem im Einsatz ist).
    • Es bestand der Wunsch, die Auswahl von Zeilen oder Spalten durch Klick auf Header oder Gutter zu deaktivieren. Vielleicht ist das kein Bedarf, der allgemein genug für eine Aufnahme in die Bibliothek ist.

  • Die DataSheetGrid-Komponente gilt als Heiliger Gral von UX/UI, ist aber wirklich zu komplex, um alle Details abzudecken. Viel Erfolg und Finanzierung dafür. Man sieht dieses wiederkehrende Muster, egal ob im Web oder auf dem Desktop, jenseits der Grenzen der jeweiligen Basisplattform.

  • Diese Komponente sieht gut aus, aber es fehlen einige Kernfunktionen wie bei Airtable oder MUI DataGrid (Sortieren/Filtern, Fixieren von Zeilen/Spalten, Aggregatzeilen, Pivot usw.).

    • Trotzdem ist es ein gutes Konzept, und viel Glück beim Aufbau eines passenden OSS-Konkurrenten.

  • Auf den ersten Blick sieht es cool aus, aber wegen des ständig wechselnden Hero-Texts oben auf der Seite wackelt die Seite auf und ab, was den Rest schwer lesbar macht. (In Firefox auf iOS)

  • Erinnert sich noch jemand daran, was mit DataTables passiert ist? Das Tool war miserabel und trotzdem weit verbreitet, sodass der Autor Geld für Support verlangen konnte.

  • Es stört, wie sich das Fokusrechteck beim Klicken auf eine andere Zelle tatsächlich von einem Ort zum anderen bewegt. Wenn man ein paar Zellen weiter klickt, kann man sehen, wie das blaue Fokusrechteck schnell zum neuen Ziel wandert. Google macht das nicht so.

  • Diese Komponente sieht wirklich toll aus, und sie wäre vor einem Monat nötig gewesen. Wird sie ausprobieren.

  • Unter iOS kann nicht in Zellen eingefügt werden, aber Tippen funktioniert. Ist das beabsichtigtes Verhalten oder ein Bug? Funktioniert Einfügen in der Desktop-Version?

  • Danke an @nick-keller. Das wurde vor einem Monat entdeckt und wirkt sehr vielversprechend. Bereichsauswahl ist standardmäßig möglich (bei einigen Alternativlösungen eine Pro-Funktion), und Zellen lassen sich anpassen. Allerdings gibt es keine Demo, die tatsächlich zeigt, dass das möglich ist, daher wird auf der Landingpage im Abschnitt „Anpassbar“ nur per Screenshot das beste Beispiel gezeigt. Nach Schwierigkeiten beim Erstellen benutzerdefinierter Header und Header-Menüs wurde zu AG-Grid gewechselt und dort eine eigene Bereichsauswahl implementiert.