Un tabel este un aranjament care organizează informațiile în rânduri și coloane. Este folosit pentru stocarea și afișarea datelor într-un format structurat.

Tabelul de reacții este o rețea de date ușoară, rapidă, complet personalizabilă (JSX, șabloane, stare, stiluri, apeluri inverse) și extensibilă, construită pentru React. Este complet controlabil prin elemente de recuzită și apeluri opționale.

Caracteristici

1. Este ușor la 11 kb (și au nevoie doar de 2 kb în plus pentru stiluri).
2. Este complet personalizabil (JSX, șabloane, stare, stiluri, apeluri inverse).
3. Este complet controlabil prin elemente de recuzită și apeluri opționale.
4. Are paginare pe partea client și pe partea serverului.
5. Are filtre.
6. Pivotare și agregare
7. Design minim și ușor de tematizat

Instalare

Să creăm un Aplicația React folosind următoarea comandă.

 $ npx create-react-app myreactapp  

În continuare, trebuie să instalăm masa de reacție . Putem instala react-table prin comanda npm, care este prezentată mai jos.

 $ npm install react-table  

Odată ce am instalat react-table, trebuie import tabelul de reacții în componenta de reacție. Pentru a face acest lucru, deschideți src/App.js fișier și adăugați următorul fragment.

 import ReactTable from 'react-table';  

Să presupunem că avem date care trebuie redate folosind 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 }]  

Împreună cu datele, trebuie să specificăm și informații despre coloană cu atributele coloanei .

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

În cadrul metodei de randare, trebuie să legăm aceste date cu react-table și apoi returnăm react-table.

 return ( )  

Acum, al nostru src/App.js fișierul arată ca mai jos.

 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;  

Ieșire

Când executăm aplicația React, vom obține rezultatul ca mai jos.

Acum, schimbați meniul derulant rânduri, vom obține rezultatul ca mai jos.