Таблицата е подредба, която организира информацията в редове и колони. Използва се за съхраняване и показване на данни в структуриран формат.

React-table е лека, бърза, напълно адаптивна (JSX, шаблони, състояние, стилове, обратни извиквания) и разширяема Datagrid, създадена за React. Той е напълно контролиран чрез допълнителни подпори и обратни извиквания.

Характеристика

1. Той е лек с 11kb (и се нуждае само от 2kb повече за стилове).
2. Той е напълно персонализиран (JSX, шаблони, състояние, стилове, обратни извиквания).
3. Той е напълно контролиран чрез допълнителни подпори и обратни извиквания.
4. Има страниране от страна на клиента и от страна на сървъра.
5. Има филтри.
6. Насочване и агрегиране
7. Минимален дизайн и лесен за тематизиране

Инсталация

Нека създадем a Приложение React използвайки следната команда.

 $ npx create-react-app myreactapp  

След това трябва да инсталираме реагираща таблица . Можем да инсталираме react-table чрез командата npm, която е дадена по-долу.

 $ npm install react-table  

След като сме инсталирали react-table, трябва да го направим импортиране таблицата на реакцията в компонента на реакцията. За да направите това, отворете src/App.js файл и добавете следния фрагмент.

 import ReactTable from '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 }]  

Заедно с данните трябва да посочим и информация за колона с атрибути на колона .

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

Вътре в метода за изобразяване трябва да свържем тези данни с таблицата за реакция и след това да върне таблицата за реакция.

 return ( )  

Сега, нашата src/App.js файлът изглежда по следния начин.

 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;  

Изход

Когато изпълним приложението React, ще получим резултата, както е показано по-долу.

Сега променете падащото меню на редовете, ще получим резултата, както е показано по-долу.