Taulukko on järjestely, joka järjestää tiedot riveihin ja sarakkeisiin. Sitä käytetään tietojen tallentamiseen ja näyttämiseen jäsennellyssä muodossa.

React-taulukko on kevyt, nopea, täysin muokattavissa (JSX, mallit, tila, tyylit, takaisinkutsut) ja laajennettava Datagrid, joka on rakennettu Reactille. Se on täysin hallittavissa valinnaisten rekvisiittausten ja takaisinkutsujen avulla.

ominaisuudet

1. Se on kevyt 11 kt (ja tarvitsee vain 2 kt lisää tyyleihin).
2. Se on täysin muokattavissa (JSX, mallit, tila, tyylit, takaisinkutsut).
3. Se on täysin hallittavissa valinnaisten rekvisiittausten ja takaisinkutsujen avulla.
4. Siinä on asiakas- ja palvelinpuolen sivutus.
5. Siinä on suodattimet.
6. Pivoting & Aggregation
7. Minimaalinen muotoilu ja helposti teemattavissa

Asennus

Luodaan a Reagoi sovellus käyttämällä seuraavaa komentoa.

 $ npx create-react-app myreactapp  

Seuraavaksi meidän on asennettava reagoi-taulukko . Voimme asentaa react-taulukon npm-komennolla, joka on annettu alla.

 $ npm install react-table  

Kun olemme asentaneet react-taulukon, meidän on tehtävä se tuonti reaktiotaulukko reaktiokomponentiksi. Voit tehdä tämän avaamalla src/App.js tiedosto ja lisää seuraava katkelma.

 import ReactTable from 'react-table';  

Oletetaan, että meillä on dataa, joka on renderöitävä react-taulukon avulla.

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

Tietojen lisäksi meidän on myös määritettävä sarakkeen tiedot kanssa sarakkeen attribuutteja .

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

Renderöintimenetelmän sisällä meidän on sidottava nämä tiedot react-taulukolla ja palautettava sitten react-taulukko.

 return ( )  

Nyt meidän src/App.js tiedosto näyttää alla olevalta.

 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;  

Lähtö

Kun suoritamme React-sovelluksen, saamme tuloksen alla olevan mukaisesti.

Muuta nyt rivien avattavaa valikkoa, saamme tulosteen kuten alla.