Una tabla es un arreglo que organiza la información en filas y columnas. Se utiliza para almacenar y mostrar datos en un formato estructurado.

La tabla de reacción es una cuadrícula de datos liviana, rápida, totalmente personalizable (JSX, plantillas, estado, estilos, devoluciones de llamadas) y extensible creada para React. Es totalmente controlable mediante accesorios opcionales y devoluciones de llamada.

Características

1. Es liviano con 11 kb (y solo necesita 2 kb más para los estilos).
2. Es totalmente personalizable (JSX, plantillas, estado, estilos, devoluciones de llamada).
3. Es totalmente controlable mediante accesorios opcionales y devoluciones de llamada.
4. Tiene paginación del lado del cliente y del lado del servidor.
5. Tiene filtros.
6. Pivotación y agregación
7. Diseño minimalista y fácilmente tematizable

Instalación

Creemos un Aplicación reaccionar usando el siguiente comando.

 $ npx create-react-app myreactapp  

A continuación, necesitamos instalar tabla de reacciones . Podemos instalar reaccionar-table mediante el comando npm, que se proporciona a continuación.

 $ npm install react-table  

Una vez que hayamos instalado reaccionar-table, debemos importar la mesa de reacción en el componente de reacción. Para hacer esto, abra el src/App.js archivo y agregue el siguiente fragmento.

 import ReactTable from 'react-table';  

Supongamos que tenemos datos que deben representarse mediante la tabla de reacción.

 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 con los datos, también necesitamos especificar el información de la columna con atributos de columna .

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

Dentro del método de renderizado, necesitamos vincular estos datos con la tabla de reacción y luego devolver la tabla de reacción.

 return ( )  

Ahora, nuestro src/App.js El archivo se ve como se muestra a continuación.

 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;  

Producción

Cuando ejecutamos la aplicación React, obtendremos el resultado como se muestra a continuación.

Ahora, cambie el menú desplegable de filas, obtendremos el resultado como se muestra a continuación.