Работа с таблицами в React: часть вторая

Продвижение в интернете

2023-03-22 0 ∞

Во второй части руководства мы продолжим изучение тонкостей работы с табличными данными в React. Мы используем библиотеку React Bootstrap Table для разработки сложных таблиц с профессиональным дизайном. В этой статье мы рассмотрим продвинутые настройки, разбиение таблицы на страницы и редактирование ячеек.

Краткое содержание статьи

Это вторая часть руководства по работе с библиотекой React Bootstrap Table2. В первой части мы создали простое React- приложение и добавили в него показанную ниже таблицу:

Работа с таблицами в React: часть вторая

Работа с таблицами в React: часть вторая

Кроме того, мы наполнили таблицу тестовыми данными, поработали с настройкой столбцов, выделением ячеек и их оформлением. В этой статье мы затронем вопросы дополнительных настроек, рассмотрим создание расширяющихся строк и редактируемых ячеек.

Расширяющиеся строки

Одна из самых впечатляющих опций библиотеки React Bootstrap Table2 – расширяющиеся строки. При визуализации табличных данных часто возникает необходимость в дополнительных строках для полного отображения информации. Но если данные во всех строках сразу будут отображаться в полном виде, это может сильно затруднить просмотр информации.

Обычный способ решения этой проблемы – показ всплывающих подсказок, но для всплывающих подсказок требуется навести курсор мыши на целевую область, и вы сможете видеть только одну всплывающую подсказку одновременно. Расширение строк позволяет отображать дополнительные данные для каждой строки в виде выдвижного ящика, который остается развернутым столько, сколько вы хотите, и вы можете свернуть его обратно, когда закончите. Вы можете развернуть столько строк одновременно, сколько захотите.

Вот как это делается с помощью библиотеки React Bootstrap Table2. Наши данные выглядят следующим образом:

const product = [   {id: 1, name: 'Headphone  Fusion', value: '100'},   {id: 2, name: 'Headphone Beats', value: '80'},   {id: 3, name: 'Headphone Modus', value: '70'},   {id: 4, name: 'Headphone Jam', value: '100'}   ]; 

Работа с таблицами в React: часть первая

Для определения расширения строки по клику мышкой мы воспользуемся свойством expandRow:

const expandRow = {   renderer: (row, rowIndex) => (     <div>       <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>       <p>You can render anything here, also you can add additional data on every row object</p>       <p>expandRow.renderer callback will pass the origin row object to you</p>     </div>   ) }; 

Добавим свойство expandRow в нашу таблицу:

<BootstrapTable          // striped         hover         keyField='id'          keyField='id'           data={ product }            columns={ columns }             // apply the expandRow property here           expandRow={ expandRow } /> 

Вот так таблица будет выглядеть после клика по строке:

Работа с таблицами в React: часть вторая

Работа с таблицами в React: часть вторая

Разбиение на страницы

Пока что мы выводили на экран таблицу, в которой всего четыре строки. В реальности таблицы могут включать в себя огромный объем информации, который обычно не помещается на экране. Для решения этой проблемы библиотека React Bootstrap Table2 предусматривает множество вариантов постраничного вывода таблицы.

Добавим в нашу таблицу несколько записей, как показано ниже:

 const product = [   {id: 1, name: 'Headphone  Fusion', value: '100'},   {id: 2, name: 'Headphone Beats', value: '80'},   {id: 3, name: 'Headphone Modus', value: '70'},   {id: 4, name: 'Headphone Jam', value: '100'},   {id: 5, name: 'Headphone Auto', value: '50'},   {id: 6, name: 'Headphone Byte', value: '70'},   {id: 7, name: 'Headphone Duo', value: '150'},   {id: 8, name: 'Headphone Modular', value: '80'},   {id: 9, name: 'Headphone Pivot', value: '150'},   {id: 10, name: 'Headphone Optimizer', value: '70'},   {id: 11, name: 'Headphone Rave', value: '50'},   {id: 12, name: 'Headphone Mach', value: '40'} ]; 

Теперь таблица готова к постраничному выводу. Сначала установим компонент react-bootstrap-table2-paginator с помощью менеджера пакетов npm:

npm install react-bootstrap-table2-paginator --save

Создание собственной библиотеки валидации для React: основы (часть 1)

После этого откроем файл App.js и пропишем импорт paginationFactory:

import paginationFactory from 'react-bootstrap-table2-paginator';

Настроим разбиение на страницы с помощью приведенных ниже параметров:

const options = {     page: 1,     sizePerPage: 5,     nextPageText: '>',     prePageText: '<',     showTotal: true   }; 

Теперь применим созданное свойство к нашей таблице, как показано ниже:

<BootstrapTable          // striped         hover         keyField='id'          keyField='id'           data={ person }            columns={ columns }            expandRow={ expandRow }           //apply the pagination function here           pagination={ paginationFactory(options) }                  /> 

После внесения этих изменений таблица будет выводиться на трех страницах. На каждой странице будет отображаться по пять записей:

Работа с таблицами в React: часть вторая

Работа с таблицами в React: часть вторая

Редактирование ячеек

Один из типичных вариантов управления данными – локальное редактирование ячеек. Редактирование обычно активируется одиночным или двойным кликом. Для реализации такой функции потребуется установить компонент react-bootstrap-table2-editor:

npm install react-bootstrap-table2-editor –save

Внесите импорт компонента в файл App.js:

//App.js import cellEditFactory from 'react-bootstrap-table2-editor'; 

Редактирование ячеек таблицы активируют следующим образом:

<BootstrapTable   hover  keyField='id'  data={ product }  columns={ columns }   expandRow={ expandRow }  pagination={ paginationFactory(options) }  cellEdit={ cellEditFactory({ mode: 'click' }) }       /> 

У вас также есть возможность запретить редактирование определенных ячеек и задать хуки для функций. Например, приведенный ниже код запрещает редактирование ячеек третьей строки:

<BootstrapTable   hover  keyField='id'  data={ product }  columns={ columns }   expandRow={ expandRow }  pagination={ paginationFactory(options) }  cellEdit={ cellEditFactory({                      mode: 'click',                      blurToSave: true,                      nonEditableRows: () => [0, 3] }) }        }) }       /> 

Работа с таблицами в React: часть вторая

Работа с таблицами в React: часть вторая

Создание собственной библиотеки валидации на React: дополнительные функции (часть 2)

Экспорт данных

Иногда изучения данных в браузере недостаточно – возникает необходимость экспорта информации для последующего анализа с помощью специализированного программного обеспечения. Достаточно импортировать модуль exportCSV – и ваша таблица получит функцию сохранения данных в CSV-файле с определенным (по желанию) названием. Экспорт данных выполняется после нажатия кнопки. Для реализации подобной функции следует установить компонент react-bootstrap-table2-toolkit:

npm install react-bootstrap-table2-toolkit --save

Функция экспорта данных доступна через свойство exportCSV в модуле ToolkitProvider. Для активации экспорта следует обернуть BootstrapTable в ToolkitProvider:

import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';   const { ExportCSVButton } = CSVExport;   //  the rest of the code here   <ToolkitProvider   keyField="id"   data={ product }   columns={ columns }   exportCSV >   {     props => (       <div>         <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>         <hr />         <BootstrapTable { ...props.baseProps } />       </div>     )   } </ToolkitProvider 

Работа с таблицами в React: часть вторая

Работа с таблицами в React: часть вторая

Поиск в таблице

Это свойство работает так же, как и функция экспорта. Прежде всего, импортируйте свойство Search, активируйте его в ToolKitProvider, а затем оберните SearchBar в ToolkitProvider:

import ToolkitProvider, { CSVExport} from 'react-bootstrap-table2-toolkit'; import { Search } from 'react-bootstrap-table2-toolkit';   const { ExportCSVButton } = CSVExport; const { SearchBar } = Search;   class App extends Component {   render() {     return (       <div className="App">         <p className="Table-header">REXO</p>        <ToolkitProvider         keyField="id"         data={ product }         columns={ columns }         exportCSV         search  >      {     props => (       <div>         <ExportCSVButton  { ...props.csvProps }>Export CSV!!</ExportCSVButton>         <h3>Search anything below:</h3>         <SearchBar { ...props.searchProps } />         <hr />           <hr />         <BootstrapTable                                   pagination={paginationFactory()}                 {...props.baseProps}               />       </div>     )      } </ToolkitProvider> 

Работа с таблицами в React: часть вторая

Работа с таблицами в React: часть вторая

Подведем итоги

Мы рассмотрели множество опций библиотеки React Bootstrap Table2, однако возможностей у нее намного больше. Она позволяет настраивать практически любые параметры таблиц. Для получения дополнительных сведений по работе с этим пакетом обратитесь к официальной документации.

Вот некоторые из основных возможностей библиотеки React Bootstrap Table2:

  • полная кастомизация строк и столбцов;
  • сортировка данных;
  • поиск в таблице;
  • выбор строк;
  • фильтры для данных в столбцах;
  • редактирование ячеек;
  • постраничный вывод записей;
  • расширяющиеся ячейки;
  • наложение;
  • импорт данных из удаленных таблиц.

Заключение

React Bootstrap Table2 – мощная библиотека. Она предоставляет удобный интерфейс для работы с табличными данными – вывода, поиска и управления. Работать с API этой библиотеки очень просто: основные функции можно активировать указанием атрибутов. При необходимости функциональность расширяется подключением дополнительных атрибутов, которые также могут быть динамическими функциями. Настроек по умолчанию будет достаточно для решения большинства задач. Кроме того, в официальной документации есть множество примеров по кастомизации и работе с продвинутыми настройками библиотеки.

Источник

Оцените статью
Добавить комментарий