Einführung

TanStack Table ist eine Headless UI-Bibliothek zum Erstellen leistungsstarker Tabellen & Datagrids für TS/JS, React, Vue, Solid, Qwik und Svelte.

Headless UI ist ein Begriff für Bibliotheken und Dienstprogramme, die die Logik, den Zustand, die Verarbeitung und die API für UI-Elemente und -Interaktionen bereitstellen, aber kein Markup, keine Stile oder vorgefertigte Implementierungen liefern. Kratzen Sie sich am Kopf? 😉 Headless UI hat ein paar Hauptziele

Die härtesten Teile beim Erstellen komplexer UIs drehen sich normalerweise um Zustände, Ereignisse, Seiteneffekte, Datenberechnung/-verwaltung. Indem diese Bedenken aus dem Markup, den Stilen und Implementierungsdetails entfernt werden, können unsere Logik und unsere Komponenten modularer und wiederverwendbarer sein.

Der Aufbau von Benutzeroberflächen ist eine sehr markenspezifische und benutzerdefinierte Erfahrung, auch wenn dies die Wahl eines Designsystems oder die Einhaltung einer Designspezifikation bedeutet. Um diese benutzerdefinierte Erfahrung zu unterstützen, müssen komponentenbasierte UI-Bibliotheken eine riesige (und scheinbar endlose) API-Oberfläche für die Anpassung von Markup und Stil unterstützen. Headless UI-Bibliotheken entkoppeln Ihre Logik von Ihrer Benutzeroberfläche

Wenn Sie eine Headless-UI-Bibliothek verwenden, werden die komplexen Aufgaben der Datenverarbeitung, Zustandsverwaltung und Geschäftslogik für Sie erledigt, sodass Sie sich um Entscheidungen mit höherer Kardinalität kümmern können, die sich zwischen Implementierungen und Anwendungsfällen unterscheiden.

Möchten Sie tiefer eintauchen? Lesen Sie mehr über Headless UI.

Im Ökosystem von Tabellen-/Datagrid-Bibliotheken gibt es zwei Hauptkategorien

• Komponentenbasierte Tabellenbibliotheken
• Headless-Tabellenbibliotheken

Jeder Ansatz hat subtile Kompromisse. Das Verständnis dieser Feinheiten wird Ihnen helfen, die richtige Entscheidung für Ihre Anwendung und Ihr Team zu treffen.

Komponentenbasierte Tabellenbibliotheken liefern Ihnen in der Regel eine funktionsreiche Plug-and-Play-Lösung und gebrauchsfertige Komponenten/Markups mit Stilen/Theming. AG Grid ist ein großartiges Beispiel für diese Art von Tabellenbibliothek.

Vorteile

• Liefern gebrauchsfertiges Markup/Stile
• Wenig Einrichtung erforderlich
• Schlüsselfertige Erfahrung

Nachteile

• Weniger Kontrolle über das Markup
• Benutzerdefinierte Stile sind in der Regel themenbasiert
• Größere Bundle-Größen
• Stark gekoppelt an Framework-Adapter und Plattformen

Wenn Sie eine gebrauchsfertige Tabelle wünschen und Design-/Bundle-Größe keine harten Anforderungen sind, sollten Sie eine komponentenbasierte Tabellenbibliothek in Betracht ziehen.

Es gibt viele komponentenbasierte Tabellenbibliotheken da draußen, aber wir glauben, dass AG Grid der Goldstandard ist und bei weitem unser Lieblings-Grid-Geschwister (sagen Sie es den anderen nicht 🤫).

Headless-Tabellenbibliotheken stellen Ihnen in der Regel Funktionen, Zustände, Dienstprogramme und Ereignislistener zur Verfügung, um Ihr eigenes Tabellen-Markup zu erstellen oder sich an bestehende Tabellen-Markups anzuhängen.

Vorteile

• Volle Kontrolle über Markup und Stile
• Unterstützt alle Styling-Muster (CSS, CSS-in-JS, UI-Bibliotheken usw.)
• Kleinere Bundle-Größen
• Portabel. Läuft überall, wo JS läuft!

Nachteile

• Mehr Einrichtung erforderlich
• Kein Markup, keine Stile oder Themes bereitgestellt

Wenn Sie eine leichtere Tabelle oder volle Kontrolle über das Design wünschen, sollten Sie eine Headless-Tabellenbibliothek in Betracht ziehen.

Es gibt nur sehr wenige Headless-Tabellenbibliotheken da draußen und offensichtlich ist TanStack Table unsere Favoritin!