Zum Hauptinhalt springen

Übersicht über die Tabellenkomponente

Sie können mit der table-Komponente Tabellen in Ihren Anwendungen erstellen, von einfachen Datenanzeigen bis hin zu komplexen Tabellen, die große Datensätze mit erweiterten Funktionen wie Suche und Filterung verwalten. Die Komponentenimplementierung ist modular aufgebaut, sodass Sie die für Ihre Anwendung erforderlichen Funktionen auswählen können und unnötige Funktionen ausschließen. Die Komponente bietet eine Reihe von zusammensetzbaren Kernkomponenten, die leicht erweitert oder angepasst werden können. Sie ermöglicht die Erstellung einfacher Implementierungen für grundlegende Anwendungsfälle, bietet aber auch die Flexibilität, die für komplexe Anwendungsfälle erforderlich ist.

Jutro Design System bietet die verschiedenen Komponenten für die Tabellenstruktur (Überschriften, Zeilen, Spalten), Seitennummerierung und Tabellenstatus. Sie erleichtert zudem die Implementierung zusätzlicher Funktionen, die die Basislösung ergänzen. Wenn Sie beispielsweise die Sortierung implementieren, enthalten Spaltenüberschriften die Sortieranzeigen. Aber es liegt in der Verantwortung des Entwicklers, die Datensortierfunktion zu implementieren, um eine Verbindung zum angegebenen Callback herzustellen.

Um die Implementierung zu erleichtern und für Referenzzwecke enthalten die bereitgestellten Beispiele einige dieser zusätzlichen Funktionen, die benutzerdefinierten Code oder die TanStack-Tabellenbibliothek nutzen. Die in den bereitgestellten Beispielen gezeigten Funktionen sind:

  • Titel und Untertitel: Eine Überschrift, die den Inhalt der Tabelle beschreibt.
  • Tabellensteuerelemente: Eine Reihe von Steuerelementen zum Ändern der Anzeige von Daten, z. B. Suche und Filter.
  • Tabellenaktionen: Eine Gruppe von Schaltflächen, die eine Aktion mit dem Datensatz der Tabelle ausführen, wie beispielsweise das Hinzufügen eines neuen Eintrags oder das Exportieren von Daten.
  • Spaltenüberschriften: Beschriftungen für jede Spalte, die den Datentyp angeben. Kopfzeilen können auch eine Sortierfunktion enthalten.
  • Datenzeilen: Ein vollständiger Satz von Zellen, die ein einzelnes Element oder einen Datensatz darstellen. Zeilen können Auswahlsteuerelemente in Form von Kontrollkästchen enthalten.
  • Zeilenaktionen: Eine Reihe von Aktionen in der letzten Spalte, die ein Benutzer für eine einzelne Zeile ausführen kann.
  • Paginierung: Steuerelemente, mit denen Benutzer durch Datenseiten navigieren und die Anzahl der pro Seite angezeigten Zeilen anpassen können.
  • Tabellen-Status: Klares visuelles Feedback, wenn die Tabelle keine Datenzeilen anzeigen kann, weil die Tabelle noch geladen wird, Daten fehlen oder ein Fehler aufgetreten ist.

Komponenten​

Teil der Tabellenkomponenten-Lösung ist ein Satz von Jutro-Komponenten, die Sie zum Erstellen Ihrer Tabellenimplementierung verwenden können. Die Komponenten sind so konzipiert, dass sie die Implementierung zusätzlicher Funktionen ermöglichen, die von ihnen selbst nicht abgedeckt werden, zum Beispiel Suchen, Filtern und Sortieren.

Struktur​

Die Tabellenstruktur basiert auf einer Reihe von Komponenten, die das Tabellenlayout und die Organisation ihre Inhalts definieren. Sie sind für die Einhaltung der Anforderungen an Barrierefreiheit verantwortlich und stellen eine Reihe von Eigenschaften und Callback-Funktionen bereit, um zusätzliche Funktionen zu aktivieren. Zu diesen Komponenten gehören:

  • Table ist der Hauptcontainer für die Tabelle, der Struktur und Layout bereitstellt.
  • TableHeader definiert den Überschriftenteil der Tabelle.
  • HeaderRow definiert eine einzelne Zeile innerhalb der Tabellenüberschrift, die mehrere Überschriftenzellen enthält.
  • HeaderCell stellt eine einzelne Überschiftenzelle in einer Zeile dar.
  • TableBody definiert den Hauptteil der Tabelle, der Datenzeilen enthält.
  • BodyRow stellt eine einzelne Zeile in der Tabelle dar, die mehrere Zellen enthält.
  • BodyCell stellt eine einzelne Zelle in einer Zeile dar, die Daten oder interaktive Elemente enthält.

Diese Komponenten müssen in geeigneter Weise verschachtelt werden, um eine gültige Tabellenstruktur zu erstellen.

Die Tabellenstruktur-Komponenten unterstützen uneingeschränkt die Attribute colspan und rowspan, sodass Sie Zellen erstellen können, die sich über mehrere Spalten oder Zeilen erstrecken. Dies ermöglicht komplexe Tabellenlayouts wie gruppierte Kopfzeilen, zusammengeführte Datenzellen und eine hierarchische Datendarstellung.

Weitere Informationen zu den Komponenten der Tabellenstruktur finden Sie in deren Komponentenverträgen.

Paginierung​

Die Funktion für die Tabellenpaginierung wird mithilfe der Pagination-Komponente implementiert. Sie bietet die Steuerelemente für die Navigation durch die Datenseiten und die Anpassung der Anzahl der pro Seite angezeigten Zeilen. Die Komponente enthält Eigenschaften und Callback-Funktionen, mit denen Sie den Seitennummerierungsstatus verwalten und Benutzerinteraktionen handhaben können.

Weitere Informationen zur Pagination-Komponente finden Sie unter deren Komponentenverträgen.

Zustände​

Die Tabellenstatusfunktion wird durch Verwendung einer Reihe von Komponenten implementiert, die eine visuelle Rückmeldung bereitstellen, wenn in der Tabelle keine Datenzeilen angezeigt werden können, weil die Tabelle noch geladen wird oder Daten fehlen. Zu diesen Komponenten gehören:

  • TableLoader zeigt eine Ladeanzeige und eine Meldung an, wenn die Tabelle Daten abruft.
  • TableEmptyState zeigt eine konfigurierbare Meldung an, wenn in der Tabelle keine Zeilen angezeigt werden können. Sie unterstützt auch eine optionale Aktionsschaltfläche, mit der Benutzer Aktionen ausführen können, z. B. eine Tabelle neu laden.

Weitere Informationen zu den Komponenten der Tabellenzustände finden Sie in deren Komponentenverträgen.

Erweitern der Tabellenkomponente​

Die Tabellenkomponente ist so konzipiert, dass sie um zusätzliche Funktionen wie Suche, Sortierung, Zeilenaktionen und mehr erweitert werden kann. Diese Funktionen werden nicht als Teil der Jutro-Komponenten implementiert, können jedoch durch benutzerdefinierten React-Code oder externe Bibliotheken hinzugefügt werden. Die Tabellenkomponenten stellen Eigenschaften und Callback-Funktionen bereit, mit denen Sie diese Funktionen entsprechend den Anforderungen Ihrer Anwendung implementieren können. Sie stellen auch sicher, dass Tabellen mit Zusatzfunktionen den Standards für Barrierefreiheit entsprechen.

Die Dokumentation der Tabellenkomponente enthält Beispiele, die veranschaulichen, wie zusätzliche Funktionen implementiert werden. Alle Beispiele werden sowohl mit als auch ohne TanStack Table-Integration entwickelt, damit Sie besser beurteilen können, welcher Ansatz am besten zu den Anforderungen Ihrer Anwendung passt.

Weitere Informationen zu Beispielen finden Sie unter Beispiele.

Erweitern mit benutzerdefiniertem React-Code​

Sie können die Tabellenkomponente erweitern, indem Sie benutzerdefinierten React-Code schreiben, der die Eigenschaften und Callback-Funktionen der Jutro-Komponenten verwendet. Dieser Ansatz ermöglicht es Ihnen, spezifische Funktionen zu implementieren, die auf die Anforderungen Ihrer Anwendung zugeschnitten sind. Sie behalten auch die Kontrolle über das Verhalten und das Erscheinungsbild der Tabelle.

Die Beispiele dienen als Ausgangspunkt für Entwickler, die ihre Tabellenimplementierungen mit benutzerdefiniertem React-Code um zusätzliche Funktionen erweitern möchten. Jutro-Komponenten und -Symbole werden darin wiederverwendet. Wenn Sie also den Beispielen folgen, können Sie sicher sein, dass die implementierte Funktion mit dem Jutro Design System konsistent ist.

Integration mit externen Bibliotheken​

Die Tabellenkomponente ist so konzipiert, dass sie nahtlos mit oder ohne externe Bibliotheken wie TanStack Table funktioniert. Dieser Ansatz ermöglicht es Entwicklern, Tabellenimplementierungen durch die Integration zusammensetzbarer Funktionen aus gängigen Bibliotheken zu erweitern oder die Tabellenkomponenten ohne externe Abhängigkeiten zu verwenden. In den Beispielen zur Implementierung von Tabellenfunktionen können Sie sehen, wie TanStack Table-Integrationen angewendet werden können. In den Beispielen wird zwar TanStack Table verwendet, Sie können aber auch andere Bibliotheken integrieren, die den Anforderungen Ihrer Anwendung besser entsprechen.

Einer der Hauptvorteile der Verwendung externer Bibliotheken besteht darin, dass ihre integrierten Funktionen genutzt werden können, z. B. Sortieren, Filtern oder andere Aspekte des Datenmanagements. Dies kann die Entwicklungszeit und den Entwicklungsaufwand erheblich reduzieren und eine robustere und funktionsreichere Tabellenimplementierung unterstützen.

Beispiele​

Die Beispiele für Tabellenkomponenten sind sowohl auf den oben genannten Dokumentationsseiten als auch in Jutro Storybook verfügbar. Optisch sind sie auf beiden Plattformen einheitlich. Aber es gibt einige Unterschiede in der Codestruktur und in den Abhängigkeiten, auf deren Grundlage Sie entscheiden können, was Ihren Anforderungen besser entspricht. Die Hauptmerkmale der Beispiele sind:

  • Codestruktur – Die Dokumentationsbeispiele sollen eine einzelne Funktion darstellen. Das Codebeispiel verwendet minimale Abhängigkeiten und Codemengen. Die Storybook-Beispiele sind so strukturiert, dass sie das Erkunden mehrerer Funktionen erleichtern. Gemeinsam genutzter Code und Abhängigkeiten sind in verschiedenen Dateien organisiert.
  • TanStack Table – Unter den Beispielen auf beiden Plattformen gibt es eine Version, die TanStack Table für einen Teil der Datenmanagementlogik verwendet, um zu zeigen, wie externe Bibliotheken in die Tabellenimplementierung integriert werden können.
  • Simulation des asynchronen Datenabrufs – Beispiele für Funktionen, die normalerweise verwendet werden, wenn die Tabelle asynchrone Daten auf beiden Plattformen verarbeitet. Es gibt eine Version, die dies simuliert, um zu veranschaulichen, wie Datenlade-Szenarien in Tabellenimplementierungen verarbeitet werden. Sie gilt für die Paginierungs-, Such- und Sortierfunktionen.
  • Testbeispiele in Ihrer IDE – Die Beispiele auf den Dokumentationsseiten werden als Codeausschnitte im Inhalt der Dokumentation präsentiert. Um sie in Ihrer IDE zu testen, kopieren Sie die Codeausschnitte in Dateien in einem einzelnen Verzeichnis und verwenden Sie sie. Die Storybook-Beispiele können auf Dateien verweisen, die nicht auf der Registerkarte Quellcode verfügbar sind. Die Verwendung in der IDE erfordert daher möglicherweise zusätzliche Konfigurationsarbeit.
  • Live-Bearbeitung – Auf der Registerkarte „Controls“ in der Live-Bearbeitungsfunktion von Storybook können Sie mit Code experimentieren und sofort Ergebnisse sehen. Bei den Dokumentationsbeispielen muss Code in Ihre IDE kopiert werden, um Bearbeitungen vorzunehmen und diese zu testen.

Um die Beispiele für Tabellenkomponenten zu erkunden, besuchen Sie:

Barrierefreiheit​

Die Tabellenkomponente basiert auf Barrierefreiheit als Kernprinzip und implementiert das Rastermuster. Die Komponente verfügt über uneingeschränkte Tastaturnavigation, eine geeignete ARIA-Semantik und Screenreader-Kompatibilität, um eine umfassende Benutzererfahrung zu gewährleisten.

Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:

  • Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
  • Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
  • Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
  • Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.

Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.