En tabell er et arrangement som organiserer informasjon i rader og kolonner. Den brukes til å lagre og vise data i et strukturert format.

React-tabellen er et lett, raskt, fullt tilpassbart (JSX, maler, tilstand, stiler, tilbakeringinger) og utvidbart Datagrid bygget for React. Den er fullt kontrollerbar via valgfrie rekvisitter og tilbakeringinger.

Egenskaper

1. Den er lett på 11 kb (og trenger bare 2 kb mer for stiler).
2. Den er fullt tilpassbar (JSX, maler, tilstand, stiler, tilbakeringinger).
3. Den er fullt kontrollerbar via valgfrie rekvisitter og tilbakeringinger.
4. Den har paginering på klientsiden og serversiden.
5. Den har filtre.
6. Pivotering og aggregering
7. Minimal design og lett tematisert

Installasjon

La oss lage en Reager app ved å bruke følgende kommando.

 $ npx create-react-app myreactapp  

Deretter må vi installere reaksjonstabell . Vi kan installere react-table via npm-kommandoen, som er gitt nedenfor.

 $ npm install react-table  

Når vi har installert react-table, må vi import reaksjonstabellen inn i reaksjonskomponenten. For å gjøre dette, åpne src/App.js fil og legg til følgende kodebit.

 import ReactTable from 'react-table';  

La oss anta at vi har data som må gjengis ved hjelp av 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 må vi også spesifisere kolonne info med kolonneattributter .

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

Inne i render-metoden må vi binde disse dataene med react-table og returnerer deretter react-tabellen.

 return ( )  

Nå vår src/App.js filen ser ut 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;  

Produksjon

Når vi kjører React-appen, får vi utdata som nedenfor.

Endre nå rullegardinmenyen for rader, vi får utdataene som nedenfor.