Tabuľka je usporiadanie, ktoré organizuje informácie do riadkov a stĺpcov. Používa sa na ukladanie a zobrazovanie údajov v štruktúrovanom formáte.

Tabuľka reakcií je ľahká, rýchla, plne prispôsobiteľná (JSX, šablóny, stav, štýly, spätné volania) a rozšíriteľná Datagrid vytvorená pre React. Je plne ovládateľný pomocou voliteľných rekvizít a spätných volaní.

Vlastnosti

1. Je ľahký pri 11 kB (a na štýly potrebuje iba 2 kb viac).
2. Je plne prispôsobiteľný (JSX, šablóny, stav, štýly, spätné volania).
3. Je plne ovládateľný pomocou voliteľných rekvizít a spätných volaní.
4. Má stránkovanie na strane klienta a servera.
5. Má filtre.
6. Pivoting & Agregation
7. Minimálny dizajn a ľahko sa tematizujú

Inštalácia

Poďme vytvoriť a Aplikácia React pomocou nasledujúceho príkazu.

 $ npx create-react-app myreactapp  

Ďalej musíme nainštalovať reakčná tabuľka . Reakčnú tabuľku môžeme nainštalovať pomocou príkazu npm, ktorý je uvedený nižšie.

 $ npm install react-table  

Keď už máme nainštalovanú tabuľku reakcií, musíme to urobiť importovať reakčnej tabuľky do reakčnej zložky. Ak to chcete urobiť, otvorte src/App.js súbor a pridajte nasledujúci úryvok.

 import ReactTable from 'react-table';  

Predpokladajme, že máme údaje, ktoré je potrebné vykresliť pomocou tabuľky reakcií.

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

Spolu s údajmi musíme špecifikovať aj informácie o stĺpci s atribúty stĺpca .

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

V rámci metódy render musíme tieto údaje spojiť s tabuľkou reakcií a potom vráti tabuľku reakcií.

 return ( )  

Teraz náš src/App.js súbor vyzerá ako nižšie.

 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;  

Výkon

Keď spustíme aplikáciu React, dostaneme výstup, ako je uvedené nižšie.

Teraz zmeňte rozbaľovaciu ponuku riadkov a dostaneme výstup, ako je uvedené nižšie.