A táblázat olyan elrendezés, amely az információkat sorokba és oszlopokba rendezi. Adatok strukturált formátumban történő tárolására és megjelenítésére szolgál.

A react-tábla egy könnyű, gyors, teljesen testreszabható (JSX, sablonok, állapot, stílusok, visszahívások) és bővíthető Datagrid, amely a React számára készült. Teljes mértékben vezérelhető opcionális kellékekkel és visszahívásokkal.

Jellemzők

1. Könnyű, 11 kb (és csak 2 kb kell több a stílusokhoz).
2. Teljesen testreszabható (JSX, sablonok, állapot, stílusok, visszahívások).
3. Teljes mértékben vezérelhető opcionális kellékekkel és visszahívásokkal.
4. Kliensoldali és szerveroldali lapozással rendelkezik.
5. Szűrők vannak benne.
6. Elforgatás és összesítés
7. Minimális kialakítás és könnyen tematikus

Telepítés

Hozzuk létre a React alkalmazás a következő paranccsal.

 $ npx create-react-app myreactapp  

Ezután telepítenünk kell react-table . Telepíthetjük a react-table-t az npm paranccsal, amelyet alább adunk meg.

 $ npm install react-table  

Miután telepítettük a react-táblát, szükségünk van rá import a reakciótáblázatot a reakciókomponensbe. Ehhez nyissa meg a src/App.js fájlt, és adja hozzá a következő kódrészletet.

 import ReactTable from 'react-table';  

Tegyük fel, hogy vannak olyan adatok, amelyeket a react-tábla segítségével kell megjeleníteni.

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

Az adatok mellett meg kell adnunk a oszlop info val vel oszlop attribútumait .

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

A renderelési metóduson belül ezeket az adatokat össze kell kötnünk a react-table-val, majd visszaadjuk a react-table-t.

 return ( )  

Most a miénk src/App.js fájl az alábbiak szerint néz ki.

 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;  

Kimenet

Amikor végrehajtjuk a React alkalmazást, az alábbi kimenetet kapjuk.

Most módosítsa a sorok legördülő menüjét, a kimenetet az alábbiak szerint kapjuk.