Tabulka je uspořádání, které organizuje informace do řádků a sloupců. Slouží k ukládání a zobrazování dat ve strukturovaném formátu.

Tabulka reakcí je lehký, rychlý, plně přizpůsobitelný (JSX, šablony, stav, styly, zpětná volání) a rozšiřitelný Datagrid vytvořený pro React. Je plně ovladatelný pomocí volitelných rekvizit a zpětných volání.

Funkce

1. Je lehký na 11 kb (a potřebuje pouze 2 kb více pro styly).
2. Je plně přizpůsobitelný (JSX, šablony, stav, styly, zpětná volání).
3. Je plně ovladatelný pomocí volitelných rekvizit a zpětných volání.
4. Má stránkování na straně klienta a na straně serveru.
5. Má filtry.
6. Pivoting & Agregation
7. Minimální design a snadno tematizovatelný

Instalace

Pojďme vytvořit a Aplikace React pomocí následujícího příkazu.

 $ npx create-react-app myreactapp  

Dále musíme nainstalovat reakční tabulka . Reag-table můžeme nainstalovat pomocí příkazu npm, který je uveden níže.

 $ npm install react-table  

Jakmile jsme nainstalovali tabulku reakcí, musíme to udělat import reakční stůl do reakční složky. Chcete-li to provést, otevřete src/App.js a přidejte následující úryvek.

 import ReactTable from 'react-table';  

Předpokládejme, že máme data, která je třeba vykreslit pomocí reakční tabulky.

 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 údaji musíme také specifikovat informace o sloupci s atributy sloupce .

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

Uvnitř metody render musíme tato data svázat s tabulkou reakcí a pak vrátí tabulku reakcí.

 return ( )  

Nyní naše src/App.js soubor vypadá následovně.

 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ýstup

Když spustíme aplikaci React, dostaneme výstup, jak je uvedeno níže.

Nyní změňte rozbalovací nabídku řádků, dostaneme výstup, jak je uvedeno níže.