Lentelė yra išdėstymas, suskirstantis informaciją į eilutes ir stulpelius. Jis naudojamas duomenims saugoti ir rodyti struktūrizuotu formatu.

„React“ lentelė yra lengvas, greitas, visiškai pritaikomas (JSX, šablonai, būsena, stiliai, atgaliniai skambučiai) ir išplečiama „Datagrid“, sukurta „React“. Jis visiškai valdomas naudojant pasirenkamus rekvizitus ir atgalinius skambučius.

funkcijos

1. Jis yra lengvas – 11 kb (ir stiliams reikia tik 2 kb daugiau).
2. Jis yra visiškai pritaikomas (JSX, šablonai, būsena, stiliai, atgaliniai skambučiai).
3. Jis visiškai valdomas naudojant pasirenkamus rekvizitus ir atgalinius skambučius.
4. Jis turi kliento ir serverio puslapių puslapius.
5. Jame yra filtrai.
6. Pasukimas ir agregavimas
7. Minimalus dizainas ir lengvai tematika

Montavimas

Sukurkime a Reaguoti programėlę naudodami šią komandą.

 $ npx create-react-app myreactapp  

Toliau turime įdiegti reaguoti-lentelė . Galime įdiegti react-table naudodami npm komandą, kuri pateikta žemiau.

 $ npm install react-table  

Įdiegę react lentelę, turime tai padaryti importuoti reakcijos lentelę į reakcijos komponentą. Norėdami tai padaryti, atidarykite src/App.js failą ir pridėkite šį fragmentą.

 import ReactTable from 'react-table';  

Tarkime, kad turime duomenų, kuriuos reikia pateikti naudojant react lentelę.

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

Kartu su duomenimis taip pat turime nurodyti stulpelio informacija su stulpelio atributai .

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

Pateikimo metodo viduje turime susieti šiuos duomenis su react-table ir tada grąžinti react-lentelę.

 return ( )  

Dabar mūsų src/App.js failas atrodo taip, kaip nurodyta toliau.

 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;  

Išvestis

Kai vykdysime „React“ programą, gausime išvestį, kaip nurodyta toliau.

Dabar pakeiskite eilučių išskleidžiamąjį meniu, gausime išvestį, kaip nurodyta toliau.