Как с помощью React Bootstrap Table создавать сложные и красиво оформленные таблицы?

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

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

В примерах ниже — приложение с рабочим названием «Семейные накопления» предназначено для работы со списком вкладов, размещенных в разных банках. Оно написано на REACT с функционалом библиотеки REDUX, но использовать компонент React Bootstrap Table2 можно и без REDUX.

Для работы с Bootstrap необходимо добавить CSS bootstrap в файле public/index.html.

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

В нашем проекте достаточно установить 2 пакета:

Основной пакет:

И пакет с опциями для редактирования ячеек:

В качестве входных данных пока используются dummy – данные, которые передаются через сервис получения данных dataService. В дальнейшем данные можно будет получать из любых других источников, например, из базы данных или файла, переписав только сервис получения данных.

Входные данные:

В этой статье не предполагается подробного описания построение самого проекта на REACT+REDUX, поэтому приводится только состав основного файла проекта index.js, в котором используется Provider из пакета react-redux для передачи атрибута store (т.е. единого хранилища данных) всем вложенным компонентам, а также передача контекста – сервиса получения данных dataService через Provider пакета react (DataProvider). Описание структуры и пошаговое описание создания REACT +REDUX проекта Вы можете посмотреть в статье по ссылке

Основной файл index.js:

Файл основного компонента – app.js:

В рамках данной статьи нас будет интересовать компонент VkladList, содержащий табличные данные.

Итак, для использования таблицы react-bootstrap-table2 импортируем компонент из ранее установленного пакета, а также css-файл для таблицы:

Для самого простого вывода данных в таблицу необходимо определить перечень столбцов — columns и передать компоненту входные данные через реквизит data. Внашем проекте мы передаем в качестве входных данных массив vklads, используя функционал библиотеки REDUX, их наш компонент VkladList получает их как props из хранилища store с помощью функции connect() пакета react-redux. Передать входные данные можно любым другим способом через ваш сервис получения данных или даже просто объявив и заполнив массив с данными по вкладам прямо в компоненте VkladList аналогично объявлению колонок.

Запускаем проект и получаем наши данные, выведенные в таблице:

Добавляем форматирование для полей дат, а в поле «Ставка» — отражение знака «%».

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

dateFormatter:

Теперь нужные колонки выводятся в отформатированном виде:

Предположим, мы хотим, чтобы вклады, сроки которых подходят к концу, подсвечивались. Это сделать несложно, добавив к таблице атрибут rowClasses. Значение этого атрибута — вызов написаного нами метода rowClass, в котором мы для нужных строк добавляем стили с использованем css:

Метод rowClass для строк с нужными датами использует специальный класс ‘custom-row-class’, описанный в css-файле. Метод ValueOf() для дат возвращает количество миллисекунд, прошедших с полуночи 1 января 1970 до указанной даты, поэтому для определения интервала от текущей даты + 30 дней добавляем количество миллисекунд: 30*24*60*60*1000:

Класс ‘custom-row-class’ в нашем css файле определим следущим образом:

И теперь строки, срок вклада которых завершен или скоро завершится, будут отображаться жирным шрифтом и подсвечиваться:

Добавляем возможность редактирования данных.

Это легко сделать, добавив атрибут cellEdit к таблице и определив его опции. Также надо не забыть импортировать компонент cellEditFactory из пакета react-bootstrap-table2-editor:

В фабрике опций редактирования cellEditFactory определим несколько атрибутов:

В методе handleChange проверяем, что значение ячейки действительно изменилось, и вызываем функцию vkladUpdated из actions, которая и передаст в reducer данные для внесения изменений в наш store. Для react проекта без redux в обработчике мы бы просто обновили state компонента.

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

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

Теперь при двойном щелчке мыши на ячейке с датой предлагается календарь для выбора даты:

В поле выбора валюты хотелось бы вводить корректный код валюты, причем, выбирать его из списка. Делаем поле редактирования для ввода валюты выпадающим списком:

Теперь при редактировании валюты появляется нужный список для выбора:

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

#selectel_инструкция