React.js-Tutorial

• 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

Zur Implementierung der Sortierung von Spalten sind folgende Schritte erforderlich:

• React-Table-Hook „useSortBy“ importieren
• Bei der Erstellung der Tabelleninstanz das „useSortBy“-Featur mit „useTable({ columns, data }, useSortBy)“ hinzufügen
• Im „th“-Tag der Methode „column.getHeaderProps()“ die Methode „column.getSortByToggleProps()“ als Parameter übergeben

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

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-Table-Hook „usePagination“ importieren
• Bei der Erstellung der Tabelleninstanz das „usePagination“ hinzufügen
• In der Liste von Objekten die aus der Tabelleninstanz generiert wird, das Objekt „page“ statt „row“ verwenden
• In der Tabelen-Struktur bei der Schleife im „tbody“-Element „page“ statt „row“ verwenden
• Für das Springen zur nächsten und zur vorhergehenden Seite muss die Objektliste die aus der Tabelleninstanz generiert wird noch um die Methoden „nextPage“ und „previousPage“ sowie den Eigenschaften „canNextPage“ und „canPreviousPage“ erweitert werden
• Zwei Button in die „render()“-Funktion einfügen, bei denen das „onClick“-Event die Methode „nextPage“ bzw. „previousPage“ aufruft

Die Auswahl von Zeilen kann wie folgt implementiert werden:

• Erstellen und Importieren einer Checkbox-Komponente
• Den Hook „useRowSelect“ importieren und beim Erstellen der Tabelleninstanz als zweites Argument übergeben
• Die Objektliste um das Objekt „selectedFlatRows“ erweitern
• Bei der Erstellung der Tabelleninstanz als drittes Argument die Funktion „(hooks) => { … }“ übergeben (hooks entspricht allen Hooks der Tabellen-Komponente)
• Mit „hooks.visibleColumns.push()“ können der Tabellenkomponente Spalten hinzugefügt werden

Das Ein- und Ausblenden von Spalten kann wie folgt implementiert werden:

• Die Objektliste um „allColumns“ und „getToggleHideAllColumnsProps“ erweitern
• Checkbox-Komponente mit „<div><Checkbox {...getToggleHideColumnsProps()} /></div>“ zum Ein- und Ausblenden aller Spalten konfigurieren
• Die Checkboxen für die einzelnen Zeilen in einer Schleife mit „allColumns.map(column => ( … ) erstellen
• In der Schleife die Checkboxen mit <div key={column.id}><label><input type=‘checkbox‘ … /> … </label></div> erstellen
• Dem Input-Element die Funktion {...column.getToggleHiddenProps()} übergeben und den Namen der Spalte im „label“-Element mit „{column.Header}“ ausgeben

Das Verändern der Spaltenbreiten kann wie folgt implementiert werden:

• Die Hooks „useBlockLayout“ und „useResizeColumns“ importieren und beim Erstellen der Tabelleninstanz als zweites und drittes Argument übergeben
• Die Objektliste um „resetResizing“ erweitern
• Einen Button einfügen, dessen „onClick“-Event die Methode „resetResizing“ aufruft
• Ein „div“-Element in das „th“-Element der Tabelle einfügen
• In das Start-Tag des „div“-Elements die Methode „{...column.getResizerProps()}“ und „className={`resizer ${column.isResizing ? 'isResizing' : ''}`}“ einfügen
• Style-Definitionen für die Klassen „.resizer“ und „.isResizing“

• npm install primereact –save
• npm install primeicons –save
• npm install react-transition-group --save

• import { componentName } from ‚primereact/componentname‘;

• import ‚primereact/resources/themes/[theme]/theme.css‘;
• import ‚primereact/resources/primereact.min.css‘;
• import ‚primeicons/primeicons.css‘;

PrimeFlex kann wie folgt mit npm importiert werden:

• npm install primeflex –save

• import ‚primeflex/primeflex.css‘;

• create-react-app my-ts-react-app --template typescript

React-Router in der Version 6 kann wie folgt in ein existierendes React-Projekt integriert werden:

• npm install react-router-dom@6