Tablica je raspored koji organizira informacije u retke i stupce. Koristi se za pohranu i prikaz podataka u strukturiranom formatu.

React-tablica je lagana, brza, potpuno prilagodljiva (JSX, predlošci, stanje, stilovi, povratni pozivi) i proširiva Datagrid izgrađena za React. Njime se može u potpunosti upravljati putem opcijskih rekvizita i povratnih poziva.

Značajke

1. Lagan je s 11 kb (i potrebno mu je samo 2 kb više za stilove).
2. Potpuno je prilagodljiv (JSX, predlošci, stanje, stilovi, povratni pozivi).
3. Njime se u potpunosti može upravljati putem opcijskih rekvizita i povratnih poziva.
4. Ima paginaciju na strani klijenta i na strani poslužitelja.
5. Ima filtere.
6. Pivotiranje i agregacija
7. Minimalistički dizajn i lako tematiziranje

Montaža

Stvorimo a Aplikacija React pomoću sljedeće naredbe.

 $ npx create-react-app myreactapp  

Zatim, moramo instalirati reagirati-tablica . React-table možemo instalirati putem naredbe npm, koja je dana u nastavku.

 $ npm install react-table  

Nakon što smo instalirali react-table, moramo to učiniti uvoz reakcijsku tablicu u reakcijsku komponentu. Da biste to učinili, otvorite src/App.js datoteku i dodajte sljedeći isječak.

 import ReactTable from 'react-table';  

Pretpostavimo da imamo podatke koje je potrebno prikazati pomoću tablice reakcija.

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

Uz podatke, također moramo specificirati informacije o stupcu s atributi stupca .

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

Unutar metode renderiranja, moramo vezati ove podatke s tablicom reakcija, a zatim vraća tablicu reakcija.

 return ( )  

Sada, naš src/App.js datoteka izgleda kao ispod.

 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;  

Izlaz

Kada izvršimo aplikaciju React, dobit ćemo izlaz kao u nastavku.

Sada, promijenite padajući izbornik redaka, dobit ćemo izlaz kao u nastavku.