Una tabella è una disposizione che organizza le informazioni in righe e colonne. Viene utilizzato per archiviare e visualizzare i dati in un formato strutturato.

La tabella di reazione è un Datagrid leggero, veloce, completamente personalizzabile (JSX, modelli, stato, stili, callback) ed estensibile creato per React. È completamente controllabile tramite oggetti di scena e callback opzionali.

Caratteristiche

1. È leggero a 11kb (e richiede solo 2kb in più per gli stili).
2. È completamente personalizzabile (JSX, modelli, stato, stili, callback).
3. È completamente controllabile tramite oggetti di scena e callback opzionali.
4. Ha l'impaginazione lato client e lato server.
5. Ha filtri.
6. Pivoting e aggregazione
7. Design minimale e facilmente personalizzabile

Installazione

Creiamo un Applicazione React utilizzando il seguente comando.

 $ npx create-react-app myreactapp  

Successivamente, dobbiamo installare tabella di reazione . Possiamo installare react-table tramite il comando npm, riportato di seguito.

 $ npm install react-table  

Una volta installata la react-table, dobbiamo farlo importare la tabella di reazione nel componente di reazione. Per fare ciò, apri il file src/App.js file e aggiungi il seguente snippet.

 import ReactTable from 'react-table';  

Supponiamo di avere dati che devono essere visualizzati utilizzando 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 }]  

Insieme ai dati, dobbiamo specificare anche il informazioni sulla colonna con attributi della colonna .

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

All'interno del metodo render, dobbiamo associare questi dati con react-table e quindi restituire la react-table.

 return ( )  

Ora, il nostro src/App.js il file appare come di seguito.

 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;  

Produzione

Quando eseguiamo l'app React, otterremo l'output come di seguito.

Ora, modifica il menu a discesa delle righe, otterremo l'output come di seguito.