En tabell är ett arrangemang som organiserar information i rader och kolumner. Den används för att lagra och visa data i ett strukturerat format.

React-tabellen är ett lätt, snabbt, helt anpassningsbart (JSX, mallar, tillstånd, stilar, callbacks) och utdragbart Datagrid byggt för React. Det är fullt styrbart via valfria rekvisita och återuppringningar.

Funktioner

1. Den är lätt på 11 kb (och behöver bara 2 kb mer för stilar).
2. Den är helt anpassningsbar (JSX, mallar, tillstånd, stilar, återuppringningar).
3. Den är helt kontrollerbar via valfria rekvisita och återuppringningar.
4. Den har paginering på klientsidan och serversidan.
5. Den har filter.
6. Pivotering och aggregation
7. Minimal design och lätt att teman

Installation

Låt oss skapa en Reager app med följande kommando.

 $ npx create-react-app myreactapp  

Därefter måste vi installera reaktionstabell . Vi kan installera react-table via npm-kommandot, som ges nedan.

 $ npm install react-table  

När vi väl har installerat react-table måste vi göra det importera reaktionstabellen in i reaktionskomponenten. För att göra detta, öppna src/App.js fil och lägg till följande kodavsnitt.

 import ReactTable from 'react-table';  

Låt oss anta att vi har data som behöver renderas med hjälp 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 }]  

Tillsammans med data måste vi också specificera kolumn info med kolumnattribut .

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

Inuti rendermetoden måste vi binda denna data med react-table och returnerar sedan react-tabellen.

 return ( )  

Nu, vår src/App.js filen ser ut som nedan.

 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 kör React-appen får vi utdata enligt nedan.

Ändra nu rullgardinsmenyn för rader, vi kommer att få utdata enligt nedan.