Tabela je ureditev, ki organizira informacije v vrstice in stolpce. Uporablja se za shranjevanje in prikaz podatkov v strukturirani obliki.

React-table je lahek, hiter, popolnoma prilagodljiv (JSX, predloge, stanje, slogi, povratni klici) in razširljiv Datagrid, zgrajen za React. Popolnoma ga je mogoče nadzorovati prek izbirnih rekvizitov in povratnih klicev.

Lastnosti

1. Je lahek z 11 kb (in potrebuje le še 2 kb več za sloge).
2. Je popolnoma prilagodljiv (JSX, predloge, stanje, slogi, povratni klici).
3. Popolnoma ga je mogoče nadzorovati prek izbirnih rekvizitov in povratnih klicev.
4. Ima paginacijo na strani odjemalca in na strani strežnika.
5. Ima filtre.
6. Vrtenje in združevanje
7. Minimalen dizajn in enostavno tematiziranje

Namestitev

Ustvarimo a Aplikacija React z uporabo naslednjega ukaza.

 $ npx create-react-app myreactapp  

Nato moramo namestiti odzivna tabela . React-table lahko namestimo prek ukaza npm, ki je podan spodaj.

 $ npm install react-table  

Ko enkrat namestimo reakcijsko tabelo, moramo uvoz reakcijsko tabelo v reakcijsko komponento. Če želite to narediti, odprite src/App.js datoteko in dodajte naslednji delček.

 import ReactTable from 'react-table';  

Predpostavimo, da imamo podatke, ki jih je treba upodobiti z reakcijsko tabelo.

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

Poleg podatkov moramo navesti tudi informacije o stolpcu z atributi stolpcev .

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

Znotraj metode upodabljanja moramo te podatke povezati z reakcijsko tabelo in nato vrne reakcijsko tabelo.

 return ( )  

Zdaj pa naš src/App.js datoteka izgleda kot spodaj.

 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;  

Izhod

Ko izvedemo aplikacijo React, bomo dobili rezultat, kot je prikazano spodaj.

Zdaj spremenite spustni meni vrstic, dobili bomo rezultat, kot je spodaj.