Tabela to układ porządkujący informacje w wiersze i kolumny. Służy do przechowywania i wyświetlania danych w ustrukturyzowanym formacie.

Tabela reakcji to lekka, szybka, w pełni konfigurowalna (JSX, szablony, stan, style, wywołania zwrotne) i rozszerzalna Datagrid zbudowana dla React. Można go w pełni kontrolować za pomocą opcjonalnych rekwizytów i wywołań zwrotnych.

Cechy

1. Jest lekki i waży 11 KB (i potrzebuje tylko 2 KB więcej na style).
2. Jest w pełni konfigurowalny (JSX, szablony, stan, style, wywołania zwrotne).
3. Można go w pełni kontrolować za pomocą opcjonalnych rekwizytów i wywołań zwrotnych.
4. Ma paginację po stronie klienta i serwera.
5. Posiada filtry.
6. Obracanie i agregacja
7. Minimalistyczny design i łatwe motywowanie

Instalacja

Stwórzmy A Aplikacja Reaguj za pomocą następującego polecenia.

 $ npx create-react-app myreactapp  

Następnie musimy zainstalować tabela reakcji . Możemy zainstalować React-table za pomocą polecenia npm, które podano poniżej.

 $ npm install react-table  

Kiedy już zainstalowaliśmy tabelę reakcji, musimy to zrobić import tabelę reakcji na komponent reakcji. Aby to zrobić, otwórz plik src/App.js plik i dodaj następujący fragment.

 import ReactTable from 'react-table';  

Załóżmy, że mamy dane, które należy wyrenderować za pomocą tabeli reakcji.

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

Oprócz danych musimy także określić informacje o kolumnie z atrybuty kolumny .

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

Wewnątrz metody render musimy powiązać te dane z tabelą reakcji, a następnie zwrócić tabelę reakcji.

 return ( )  

Teraz nasze src/App.js plik wygląda jak poniżej.

 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;  

Wyjście

Kiedy uruchomimy aplikację React, otrzymamy wynik jak poniżej.

Teraz zmień menu rozwijane wierszy, otrzymamy wynik jak poniżej.