Tabula ir izkārtojums, kas sakārto informāciju rindās un kolonnās. To izmanto, lai uzglabātu un parādītu datus strukturētā formātā.

React tabula ir viegla, ātra, pilnībā pielāgojama (JSX, veidnes, stāvoklis, stili, atzvani) un paplašināms Datagrid, kas izveidots React. Tas ir pilnībā vadāms, izmantojot papildu rekvizītus un atzvanus.

Iespējas

1. Tas ir viegls — 11 kb (un stiliem ir nepieciešams tikai 2 kb vairāk).
2. Tas ir pilnībā pielāgojams (JSX, veidnes, stāvoklis, stili, atzvani).
3. Tas ir pilnībā vadāms, izmantojot papildu rekvizītus un atzvanus.
4. Tam ir klienta un servera puses lappuse.
5. Tam ir filtri.
6. Riņķošana un apkopošana
7. Minimāls dizains un viegli tematisks

Uzstādīšana

Izveidosim a Reaģēt lietotne izmantojot šādu komandu.

 $ npx create-react-app myreactapp  

Tālāk mums ir jāinstalē reaģēt-tabula . Mēs varam instalēt react-table, izmantojot npm komandu, kas ir norādīta tālāk.

 $ npm install react-table  

Kad esam uzstādījuši reaģēšanas tabulu, mums tas ir jādara imports reakcijas tabulu uz reakcijas komponentu. Lai to izdarītu, atveriet src/App.js failu un pievienojiet šādu fragmentu.

 import ReactTable from 'react-table';  

Pieņemsim, ka mums ir dati, kas jāatveido, izmantojot reakcijas tabulu.

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

Kopā ar datiem mums ir jānorāda arī kolonnas informācija ar kolonnas atribūti .

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

Renderēšanas metodē šie dati ir jāsaista ar react-table un pēc tam jāatgriež react-table.

 return ( )  

Tagad mūsu src/App.js fails izskatās šādi.

 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;  

Izvade

Kad mēs izpildīsim React lietotni, mēs saņemsim tālāk norādīto izvadi.

Tagad mainiet rindu nolaižamo izvēlni, mēs saņemsim izvadi, kā norādīts tālāk.