Табела је аранжман који организује информације у редове и колоне. Користи се за складиштење и приказ података у структурираном формату.

Реацт-табела је лагана, брза, потпуно прилагодљива (ЈСКС, шаблони, стање, стилови, повратни позиви) и проширива Датагрид направљена за Реацт. У потпуности се може контролисати преко опционих реквизита и повратних позива.

Карактеристике

1. Лаган је на 11 кб (и треба му само 2 кб више за стилове).
2. Потпуно је прилагодљив (ЈСКС, шаблони, стање, стилови, повратни позиви).
3. У потпуности се може контролисати преко опционих реквизита и повратних позива.
4. Има пагинацију на страни клијента и на страни сервера.
5. Има филтере.
6. Пивотинг & Аггрегатион
7. Минимални дизајн и лако тематски

Инсталација

Хајде да креирамо а Реацт апп користећи следећу команду.

 $ npx create-react-app myreactapp  

Затим морамо да инсталирамо реаговати сто . Можемо да инсталирамо реацт-табле преко нпм команде, која је дата у наставку.

 $ npm install react-table  

Када смо инсталирали реаг-табелу, морамо увоз реакциону табелу у реагујућу компоненту. Да бисте то урадили, отворите срц/Апп.јс датотеку и додајте следећи исечак.

 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 ( )  

Сада, наш срц/Апп.јс датотека изгледа као испод.

 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;  

Излаз

Када извршимо Реацт апликацију, добићемо излаз као у наставку.

Сада промените падајући мени редова, добићемо излаз као испод.