Uma tabela é um arranjo que organiza informações em linhas e colunas. É usado para armazenar e exibir dados em um formato estruturado.

A tabela de reação é um Datagrid leve, rápido, totalmente personalizável (JSX, modelos, estado, estilos, retornos de chamada) e extensível criado para React. É totalmente controlável por meio de acessórios e retornos de chamada opcionais.

Características

1. É leve, pesando 11kb (e só precisa de mais 2kb para estilos).
2. É totalmente personalizável (JSX, modelos, estado, estilos, retornos de chamada).
3. É totalmente controlável por meio de acessórios e retornos de chamada opcionais.
4. Possui paginação do lado do cliente e do lado do servidor.
5. Possui filtros.
6. Dinâmica e agregação
7. Design minimalista e fácil de personalizar

Instalação

Vamos criar um Aplicativo React usando o seguinte comando.

 $ npx create-react-app myreactapp  

Em seguida, precisamos instalar tabela de reação . Podemos instalar a tabela de reação por meio do comando npm, fornecido a seguir.

 $ npm install react-table  

Depois de instalar a tabela de reação, precisamos importar a tabela de reação no componente de reação. Para fazer isso, abra o src/App.js arquivo e adicione o seguinte trecho.

 import ReactTable from 'react-table';  

Vamos supor que temos dados que precisam ser renderizados usando a tabela de reação.

 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 }]  

Junto com os dados, também precisamos especificar o informações da coluna com atributos de coluna .

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

Dentro do método render, precisamos vincular esses dados à tabela de reação e então retornar a tabela de reação.

 return ( )  

Agora, nosso src/App.js arquivo se parece com abaixo.

 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;  

Saída

Quando executarmos o aplicativo React, obteremos a saída conforme abaixo.

Agora, altere o menu suspenso de linhas, obteremos a saída conforme abaixo.