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“ imortieren
  • 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

React.js-Dateien:

CSS-Datei:

Ergebnis:

Mit „disableFilters: true“ in den Spaltendefinitionen kann der Spaltenfilter für einzelen Spalten deaktiviert werden:

React.js-Dateien:

Ergebnis:

Quellen