En tabel er et arrangement, der organiserer information i rækker og kolonner. Det bruges til at gemme og vise data i et struktureret format.

React-tabellen er et letvægts, hurtigt, fuldt tilpasseligt (JSX, skabeloner, tilstand, stilarter, tilbagekald) og udvideligt Datagrid bygget til React. Det er fuldt kontrollerbart via valgfri rekvisitter og tilbagekald.

Funktioner

1. Den er let på 11 kb (og behøver kun 2 kb mere til styles).
2. Det kan tilpasses fuldt ud (JSX, skabeloner, tilstand, stilarter, tilbagekald).
3. Det er fuldt kontrollerbart via valgfri rekvisitter og tilbagekald.
4. Den har paginering på klientsiden og serversiden.
5. Den har filtre.
6. Pivotering og aggregation
7. Minimalt design og let tematisk

Installation

Lad os skabe en Reager app ved hjælp af følgende kommando.

 $ npx create-react-app myreactapp  

Dernæst skal vi installere reaktionstabel . Vi kan installere react-table via npm kommando, som er givet nedenfor.

 $ npm install react-table  

Når vi har installeret react-table, skal vi importere reaktionstabellen ind i reaktionskomponenten. For at gøre dette skal du åbne src/App.js fil og tilføj følgende uddrag.

 import ReactTable from 'react-table';  

Lad os antage, at vi har data, som skal gengives ved hjælp af react-table.

 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 }]  

Sammen med data skal vi også specificere kolonne info med kolonne attributter .

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

Inde i render-metoden skal vi binde disse data med react-table og returnerer derefter react-tablen.

 return ( )  

Nu, vores src/App.js fil ser ud som nedenfor.

 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;  

Produktion

Når vi udfører React-appen, får vi output som nedenfor.

Skift nu rullemenuen for rækker, vi får output som nedenfor.