Un tableau est un arrangement qui organise les informations en lignes et en colonnes. Il est utilisé pour stocker et afficher des données dans un format structuré.

La table de réaction est une Datagrid légère, rapide, entièrement personnalisable (JSX, modèles, état, styles, rappels) et extensible conçue pour React. Il est entièrement contrôlable via des accessoires et des rappels facultatifs.

Caractéristiques

1. Il est léger à 11 Ko (et n’a besoin que de 2 Ko de plus pour les styles).
2. Il est entièrement personnalisable (JSX, modèles, état, styles, rappels).
3. Il est entièrement contrôlable via des accessoires et des rappels facultatifs.
4. Il a une pagination côté client et côté serveur.
5. Il a des filtres.
6. Pivotement et agrégation
7. Design minimaliste et facilement thématique

Installation

Créons un Application Réagir en utilisant la commande suivante.

 $ npx create-react-app myreactapp  

Ensuite, nous devons installer table de réaction . Nous pouvons installer React-Table via la commande npm, indiquée ci-dessous.

 $ npm install react-table  

Une fois que nous avons installé React-Table, nous devons importer la table de réaction dans le composant de réaction. Pour ce faire, ouvrez le src/App.js fichier et ajoutez l’extrait suivant.

 import ReactTable from 'react-table';  

Supposons que nous ayons des données qui doivent être restituées à l'aide de 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 }]  

Outre les données, nous devons également préciser le informations sur la colonne avec attributs de colonne .

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

Dans la méthode de rendu, nous devons lier ces données à la table de réaction, puis renvoyer la table de réaction.

 return ( )  

Maintenant, notre src/App.js le fichier ressemble à celui ci-dessous.

 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;  

Sortir

Lorsque nous exécutons l'application React, nous obtiendrons le résultat ci-dessous.

Maintenant, modifiez le menu déroulant des lignes, nous obtiendrons le résultat comme ci-dessous.