2023-03-22 0 ∞
Во второй части руководства мы продолжим изучение тонкостей работы с табличными данными в React. Мы используем библиотеку React Bootstrap Table для разработки сложных таблиц с профессиональным дизайном. В этой статье мы рассмотрим продвинутые настройки, разбиение таблицы на страницы и редактирование ячеек.
Краткое содержание статьи
Это вторая часть руководства по работе с библиотекой React Bootstrap Table2. В первой части мы создали простое 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 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-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: дополнительные функции (часть 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
Поиск в таблице
Это свойство работает так же, как и функция экспорта. Прежде всего, импортируйте свойство 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 Bootstrap Table2, однако возможностей у нее намного больше. Она позволяет настраивать практически любые параметры таблиц. Для получения дополнительных сведений по работе с этим пакетом обратитесь к официальной документации.
Вот некоторые из основных возможностей библиотеки React Bootstrap Table2:
- полная кастомизация строк и столбцов;
- сортировка данных;
- поиск в таблице;
- выбор строк;
- фильтры для данных в столбцах;
- редактирование ячеек;
- постраничный вывод записей;
- расширяющиеся ячейки;
- наложение;
- импорт данных из удаленных таблиц.
Заключение
React Bootstrap Table2 – мощная библиотека. Она предоставляет удобный интерфейс для работы с табличными данными – вывода, поиска и управления. Работать с API этой библиотеки очень просто: основные функции можно активировать указанием атрибутов. При необходимости функциональность расширяется подключением дополнительных атрибутов, которые также могут быть динамическими функциями. Настроек по умолчанию будет достаточно для решения большинства задач. Кроме того, в официальной документации есть множество примеров по кастомизации и работе с продвинутыми настройками библиотеки.
Источник: www.internet-technologies.ru