Работа с таблицами в React: часть вторая
Во второй части руководства мы продолжим изучение тонкостей работы с табличными данными в 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'}
];
Для определения расширения строки по клику мышкой мы воспользуемся свойством 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После этого откроем файл 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] }) }
}) }
/>
Экспорт данных
Иногда изучения данных в браузере недостаточно – возникает необходимость экспорта информации для последующего анализа с помощью специализированного программного обеспечения. Достаточно импортировать модуль 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 этой библиотеки очень просто: основные функции можно активировать указанием атрибутов. При необходимости функциональность расширяется подключением дополнительных атрибутов, которые также могут быть динамическими функциями. Настроек по умолчанию будет достаточно для решения большинства задач. Кроме того, в официальной документации есть множество примеров по кастомизации и работе с продвинутыми настройками библиотеки.