Eine Tabelle ist eine Anordnung, die Informationen in Zeilen und Spalten organisiert. Es dient der Speicherung und Anzeige von Daten in einem strukturierten Format.

Die React-Table ist ein leichtes, schnelles, vollständig anpassbares (JSX, Vorlagen, Status, Stile, Rückrufe) und erweiterbares Datagrid, das für React entwickelt wurde. Es ist vollständig über optionale Requisiten und Rückrufe steuerbar.

Merkmale

1. Mit 11 KB ist es leichtgewichtig (und benötigt nur 2 KB mehr für Stile).
2. Es ist vollständig anpassbar (JSX, Vorlagen, Status, Stile, Rückrufe).
3. Es ist vollständig über optionale Requisiten und Rückrufe steuerbar.
4. Es verfügt über eine clientseitige und serverseitige Paginierung.
5. Es verfügt über Filter.
6. Pivotierung und Aggregation
7. Minimales Design und leicht thematisch anpassbar

Installation

Lassen Sie uns eine erstellen Reaktions-App mit dem folgenden Befehl.

 $ npx create-react-app myreactapp  

Als nächstes müssen wir installieren Reaktionstabelle . Wir können React-Table über den unten angegebenen Befehl npm installieren.

 $ npm install react-table  

Sobald wir React-Table installiert haben, müssen wir es tun importieren der React-Tabelle in die React-Komponente. Öffnen Sie dazu die src/App.js Datei und fügen Sie das folgende Snippet hinzu.

 import ReactTable from 'react-table';  

Nehmen wir an, wir haben Daten, die mit React-Table gerendert werden müssen.

 const data = [{ name: 'Ayaan', age: 26 },{ name: 'Ahana', age: 22 },{ name: 'Peter', age: 40 },{ name: 'Virat', age: 30 },{ name: 'Rohit', age: 32 },{ name: 'Dhoni', age: 37 }]  

Neben den Daten müssen wir auch die angeben Spalteninfo mit Spaltenattribute .

 const columns = [{ Header: 'Name', accessor: 'name' },{ Header: 'Age', accessor: 'age' }]  

Innerhalb der Render-Methode müssen wir diese Daten mit der Reaktionstabelle binden und dann die Reaktionstabelle zurückgeben.

 return ( )  

Nun, unser src/App.js Die Datei sieht wie folgt aus.

 import React, { Component } from 'react'; import ReactTable from 'react-table'; import 'react-table/react-table.css'; class App extends Component { render() { const data = [{ name: 'Ayaan', age: 26 },{ name: 'Ahana', age: 22 },{ name: 'Peter', age: 40 },{ name: 'Virat', age: 30 },{ name: 'Rohit', age: 32 },{ name: 'Dhoni', age: 37 }] const columns = [{ Header: 'Name', accessor: 'name' },{ Header: 'Age', accessor: 'age' }] return ( ) } } export default App;  

Ausgabe

Wenn wir die React-App ausführen, erhalten wir die folgende Ausgabe.

Ändern Sie nun das Dropdown-Menü „Zeilen“. Wir erhalten die folgende Ausgabe.