Таблиця – це структура, яка організовує інформацію в рядки та стовпці. Він використовується для зберігання та відображення даних у структурованому форматі.

React-table — це легка, швидка, повністю настроювана (JSX, шаблони, стан, стилі, зворотні виклики) і розширювана Datagrid, створена для React. Ним можна повністю керувати за допомогою додаткових властивостей і зворотних викликів.

особливості

1. Він легкий — 11 Кб (і потребує лише 2 Кб більше для стилів).
2. Він повністю настроюється (JSX, шаблони, стан, стилі, зворотні виклики).
3. Ним можна повністю керувати за допомогою додаткових властивостей і зворотних викликів.
4. Він має розбивку сторінок на стороні клієнта та на стороні сервера.
5. Має фільтри.
6. Зведення та агрегація
7. Мінімальний дизайн і легко тематичний

монтаж

Давайте створимо a Додаток React використовуючи наступну команду.

 $ npx create-react-app myreactapp  

Далі нам потрібно встановити таблиця реакцій . Ми можемо встановити React-table за допомогою команди npm, яка наведена нижче.

 $ npm install react-table  

Щойно ми встановили таблицю реакцій, нам потрібно це зробити імпорт таблицю react у компонент react. Для цього відкрийте src/App.js файл і додайте наступний фрагмент.

 import ReactTable from 'react-table';  

Припустімо, що у нас є дані, які потрібно відобразити за допомогою таблиці реакцій.

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

Усередині методу render нам потрібно зв’язати ці дані з таблицею реакцій, а потім повернути таблицю реакцій.

 return ( )  

Тепер наш src/App.js файл виглядає так, як показано нижче.

 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;  

Вихід

Коли ми запустимо програму React, ми отримаємо результат, як показано нижче.

Тепер змініть спадне меню рядків, і ми отримаємо результат, як показано нижче.