React-Table 2

Footer

Mit einem Footer können Spalteninformationen am Ende der Tabelle angegeben werden. Zur Erstellung eines Footers sind folgende Schritte erforderlich:

Die Spaltendefinition um einen Eintrag (z. B. „Footer“) erweitern
Die Liste von Objekten bei der Verwendung der Tabelleninstanz um das Objekt „footerGroups“ erweitern
Die Tabellen-Struktur um „<tfoot>...</tfoot>“ und den entsprechenden Methoden zur Auflistung und Darstellung der Spalteninformationen erweitern
ggf. die CSS-Datei um „tfoot td“ erweitern

React.js-Dateien:

CSS-Datei:

Ergebnis:

Sortierung

Zur Implementierung der Sortierung von Spalten sind folgende Schritte erforderlich:

React-Table-Hook „useSortBy“ importieren
Bei der Erstellung der Tabelleninstanz das „useSortBy“-Feature mit „useTable({ columns, data }, useSortBy)“ hinzufügen
Im „th“-Tag der Methode „column.getHeaderProps()“ die Methode „column.getSortByToggleProps()“ als Parameter übergeben
ggf. Icons für die Darstellung der Sortierung im „th“-Element hinzufügen

React.js-Dateien:

CSS-Datei:

Ergebnis:

Filterung

Globale Filterung

Zur Implementierung einer globalen Filterung, d. h. über alle Spalten, sind folgende Schritte erforderlich:

React-Table-Hook „useGlobalFilter“ imortieren
Bei der Erstellung der Tabelleninstanz das „useGlobalFilter“-Feature mit „useTable({ columns, data }, useGlobalFilter)“ hinzufügen
Die Liste von Objekten bei der Verwendung der Tabelleninstanz um die Objekte „state“ und „setGlobalFilter“ erweitern
Die Konstante „globalFilter“ aus dem „state“-Objekt generieren
Eine Funktions-Komponente (im Beispiel „GlobalFilter“) zur Implementierung des globalen Filters erstellen
Import der Funktions-Komponente „GlobalFilter“
Die Funktions-Komponente in die return-Anweisung integrieren und die Objekte „globalFilter“ und „setGlobalFilter“ als Parameter übergeben

React.js-Dateien:

CSS-Datei:

Ergebnis:

Filterung über Spalten

Zur Implementierung einer Filterung über einzelne Spalten, sind folgende Schritte erforderlich:

React-Table-Hook „useFilters“ imortieren
Bei der Erstellung der Tabelleninstanz das „useFilter“-Feature mit „useTable({ columns, data }, useFilter)“ hinzufügen
Eine Funktions-Komponente (im Beispiel „ColumnFilter“) zur Implementierung der Filterung über Spalten erstellen
Die Funktions-Komponente „ColumnFilter“ in der Datei zur Spaltendefinition importieren
Die Spaltendefinitionen um „Filter: ColumnFilter“ erweitern
In der Schleife des Headers das „th“-Element um „<div>{column.canFilter ? column.render('Filter') : null}</div>“ erweitern