Een tabel is een arrangement waarin informatie in rijen en kolommen wordt geordend. Het wordt gebruikt om gegevens in een gestructureerd formaat op te slaan en weer te geven.

De reactietabel is een lichtgewicht, snelle, volledig aanpasbare (JSX, sjablonen, status, stijlen, callbacks) en uitbreidbare datagrid gebouwd voor React. Het is volledig bestuurbaar via optionele rekwisieten en callbacks.

Functies

1. Het is lichtgewicht met 11 kb (en heeft slechts 2 kb meer nodig voor stijlen).
2. Het is volledig aanpasbaar (JSX, sjablonen, status, stijlen, callbacks).
3. Het is volledig bestuurbaar via optionele rekwisieten en callbacks.
4. Het heeft paginering aan de client- en serverzijde.
5. Er zitten filters in.
6. Draaien en aggregeren
7. Minimaal ontwerp en gemakkelijk te theman

Installatie

Laten we een Reageer app met behulp van de volgende opdracht.

 $ npx create-react-app myreactapp  

Vervolgens moeten we installeren reageer-tabel . We kunnen react-table installeren via de npm-opdracht, die hieronder wordt gegeven.

 $ npm install react-table  

Zodra we de reactietabel hebben geïnstalleerd, moeten we dat doen importeren de reactietabel in de reactiecomponent. Om dit te doen, opent u de src/App.js bestand en voeg het volgende fragment toe.

 import ReactTable from 'react-table';  

Laten we aannemen dat we gegevens hebben die moeten worden weergegeven met behulp van 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 }]  

Naast gegevens moeten we ook de kolom informatie met kolom attributen .

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

Binnen de rendermethode moeten we deze gegevens binden met react-table en vervolgens de react-table retourneren.

 return ( )  

Nu, onze src/App.js bestand ziet er als volgt uit.

 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;  

Uitvoer

Wanneer we de React-app uitvoeren, krijgen we de uitvoer zoals hieronder.

Wijzig nu het vervolgkeuzemenu met rijen, we krijgen de uitvoer zoals hieronder.