Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React

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

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Working With Tables in React.
Working With Tables in React: Part Two

Russian (Pусский) translation by Oleg Kiselevich (you can also view the original English article)

Введение

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

  • определение столбцов и заголовков
  • различные форматы ячеек (текст, числа, переключатели)
  • изменение размеров
  • фильтрация данных
  • динамические добавления
  • стиль

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

Создание базового приложения React

Я предполагаю, что вы знакомы с самим React, и поэтому сосредоточусь на работе с React Bootstrap Table. На Envato Tuts+ есть отличная серия уроков по React, с которой вы можете ознакомиться для общего понимания. 

В двух словах, я использовал react-create-app для создания базового приложения React, и затем установил react-bootstrap-table: npm install react-bootstrap-table --save.

Также важно добавить CSS bootstrap в файле public/index.html.

WebStorm

Если вы используете WebStorm от JetBrains и хотите запускать тесты, добавьте --env=jsdom в ваших настройках запуска.

Базовая таблица

Начнем с базовой таблицы. Ниже представлен базовый компонент таблицы. Он импортирует BootstrapTable и TableHeaderColumn из react-bootstrap-table, а также CSS из директории dist. 

Метод render() выводит таблицу с тремя колонками: "ID", "Имя" и "Значение". Данные в таблицу поступают из свойства "data" (this.props.data). Данные содержат имена некоторых персонажей очень смешного шоу "Разработка под арестом"

Я создал BasicTable в методе render() стандартного App.js и передал ему некоторые данные напрямую:

Для просмотра таблицы введите команду npm start. Конфигурация, созданная create-react-app, наблюдает за вашим кодом и компилирует его при любых изменениях, так что эту команду вам нужно выполнить только один раз, после чего все изменения будут автоматически отражаться на результате. 

Вот как выглядит результат:

Basic table output with three columns and rows

Обратите внимание, что каждая колонка имеет одинаковую ширину.

Работа с колонками

Вы можете контролировать различные аспекты колонок. В частности, ширина колонок может быть задана в абсолютных единицах, в процентах, либо может быть не задана вовсе. Ширина всех колонок, значение для которых не задано, будет рассчитана путем деления оставшегося пространства на равные части. Например, для таблицы шириной 100 пикселей, ширина первой колонки задана в 15 пикселей, второй - 25% (25 пикселей), а третьей - 30% (30 пикселей).

Ширина оставшихся двух колонок не задана. Колонки 1, 2 и 3 заняли 70 пикселей, что означает, что оставшиеся 30 пикселей будут поровну разделены между колонками 4 и 5. Колонки 4 и 5 будут иметь ширину по 15 пикселей каждая. Обратите внимание, что эти значения будут меняться при изменении размера всей таблицы. Только колонка 1 всегда будет иметь ширину в 15 пикселей. 

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

Working with Columns

Оформление вашей таблицы

Вы увидели, как можно оформлять отдельные колонки и заголовки, но можно пойти еще дальше. React-bootstrap-table предоставляет множество опций для этого. Во-первых, вы можете просто добавить атрибуты striped и hover компоненту BootstrapTable для того, чтобы задать изменяющийся цвет фона для каждой строки: <BootstrapTable data={this.props.data} striped hover>

Для оформления всех строк, используйте trClassName: <BootstrapTable data={data} trClassName='tr-style'>

Если вы хотите пойти еще более изощренным путем, то trStyle может быть задан через функцию. Посмотрите, как ниже компонент таблицы имеет особое стилевое оформление для тех строчек, в которых имя указано как "George Michael":

CSS классы GeorgeMichael-Row и Other-Row определены в файле Table.css:

Styling the table

Выделение строк

После добавления данных в вашу таблицу, возможно вам понадобиться выделить некоторые строки для выполнения над ними каких-либо операций. React-bootstrap-table предоставляет множество различных опций для выделения. Все они объединены в одном объекте, который вы передаете компоненту в качестве значения атрибута selectRow. Вот некоторые из опций выделения:

  • режим выделения по одной строке (переключатель)
  • режим выделения нескольких строк (флажок)
  • настройки ширины колонки выделения
  • выделять по щелчку на строке: по умолчанию необходимо щелкнуть на селектор (переключатель или флажок)
  • спрятать колонку выделения (полезно, если активировано выделение по щелчку на строке)
  • изменение фона при выделении
  • изначально выделенные строки
  • события при выделении (при выделении одной строки или когда выделены все строки)

Следующие компоненты демонстрируют применение многих из этих опций:

Selecting Rows

Заключение

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

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

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.