Una taula és una disposició que organitza la informació en files i columnes. S'utilitza per emmagatzemar i mostrar dades en un format estructurat.

La taula de reacció és una graella de dades lleugera, ràpida, totalment personalitzable (JSX, plantilles, estat, estils, devolució de trucada) i extensible creada per a React. Es pot controlar completament mitjançant accessoris i trucades opcionals.

Característiques

1. És lleuger amb 11 kb (i només necessita 2 kb més per als estils).
2. És totalment personalitzable (JSX, plantilles, estat, estils, trucades).
3. Es pot controlar completament mitjançant accessoris i trucades opcionals.
4. Té paginació del costat del client i del costat del servidor.
5. Té filtres.
6. Pivotació i agregació
7. Disseny mínim i tematitzat fàcilment

Instal·lació

Creem un Aplicació React utilitzant la següent comanda.

 $ npx create-react-app myreactapp  

A continuació, hem d'instal·lar taula de reaccions . Podem instal·lar react-table mitjançant l'ordre npm, que es mostra a continuació.

 $ npm install react-table  

Un cop hem instal·lat react-table, ho hem de fer importar la taula de reacció al component de reacció. Per fer-ho, obriu src/App.js fitxer i afegiu el fragment següent.

 import ReactTable from 'react-table';  

Suposem que tenim dades que s'han de representar mitjançant 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 }]  

Juntament amb les dades, també hem d'especificar informació de la columna amb atributs de la columna .

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

Dins del mètode de renderització, hem d'enllaçar aquestes dades amb react-table i després retorna la react-table.

 return ( )  

Ara, el nostre src/App.js El fitxer té l'aspecte següent.

 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;  

Sortida

Quan executem l'aplicació React, obtindrem la sortida com a continuació.

Ara, canvieu el menú desplegable de files, obtindrem la sortida com a continuació.