Стандарты проектирования таблицы

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

Баннер

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

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

Баннер также можно использовать в заблокированном виде. Он может быть как свернут (в случае, если у вас нет нужды выводить важный контент), так и раскрыт.

Карточка

Карточка содержит шапку таблицы и саму таблицу.

1. У карточки не должно быть внутренних отступов. В Дизайнере интерфейсов это реализуется через клик на Карточку -> в панели редактирования Внутренний отступ -> Без отступа;

🔴 Плохо

🟢 Хорошо

2. Нельзя располагать карточку в карточке исходя из концепции Soft UI. Это касается не только таблиц, но, и форм, и других интерфейсов.

🔴 Плохо

🟢 Хорошо

Шапка таблицы

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

Табы переключения представления данных

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

Правила использования

1. Табы встраиваются в карточку над всем контентом;
2. Отображают те представления, которые доступны пользователю;
3. По умолчанию активно наиболее информативное представление для пользователя, его определяет команда;

Примеры использования

Древовидная структура

Список

Диаграмма Ганта

Кнопки основных действий в гриде

Расположение кнопок в таблице

Кнопки в гриде располагаются в одной строке с фильтрами, справа от них.

Если грид подразумевает добавление, редактирование и фильтрацию данных, то минимальным набором основных кнопок для такого грида будет:

• Основная кнопка добавления (Типа Primary)
• Дополнительная кнопка настройки отображения фильтров
• Дополнительная кнопка обновления данных таблицы

Подробнее о кнопках Подробнее о добавлении разных типов объектов

Фильтры

Расположение фильтров в таблице

Фильтры содержатся в обертке wrapper. Их можно располагать в одну и более строк. Основные фильтры могут быть уже отображены при первом входе на страницу с таблицей, а второстепенные фильтры могут добавляться опционально по необходимости через кнопку с иконкой фильтра, которая расположена в ряду кнопок основных действий (предыдущий пункт).

Важно
Не нужно добавлять сразу все фильтры на страницу, только самые важные.

Виды фильтров

В дизайн-системе есть несколько видов фильтров:

Тип	Описание
	Simple - Такие фильтры имеют только два значения — On/Off. Желательно располагать слева, перед всеми остальными фильтрами.
	Остальные виды - Фильтры всех остальных видов по стандарту содержат Лейбл (слева) с наименованием фильтра и значение, по которому нужно отсортироваться (справа), по дефолту — Все..

Порядок расположения фильтров

Порядок расположения фильтр должен соответствовать порядку колонок в таблице. Если таблица поддерживает функцию смены колонок, то фильтры менять местами не нужно, они должны соответствовать стартовому порядку и подчиняться настройкам пользователя - какие фильтры отображать, какие нет.

Сворачивание фильтров

Если грид может содержать много фильтров, то возможно подключить функционал сворачивания фильтров (opens in a new tab) сворачивания фильтров.

Подробнее о фильтрах

Таблица

Таблица содержит в себе следующие элементы:

• Верхняя панель таблицы - может содержать фильтры таблицы, кнопки действия и другие настройки
• Заголовок таблицы - Содержит в себе наименования колонок ячейки, кнопку сортировки по колонке, сложные фильтры, чекбоксы для вобора страки и реализации массовых действий
• Тело таблицы - Содержит в себе основной контент таблицы, а так же кнопки взаимодействия со строкой и переходы на другие страницы проекта
• Подвал таблицы - Отображает количество записей в таблице и если подключен - пагинатор
• Информационный блок таблицы - Отображает информацию при неверно отфильтрованной таблице или при отсутствие в ней записей, а так же другие ошибки

Кнопка обновления страницы в шапке таблицы обязательна. Это кнопка типа raised с иконкой pi-refresh.

Высота таблицы

Хорошей практикой является отображение таблицы на весь экран. Если у Вас не связанные таблицы или не две таблицы на одной странице следует растянуть таблицу на всю доступную ей высоту.

🔴 Плохо

🟢 Хорошо

Ширина столбцов таблицы

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

Важно! При горизонтальном скролле столбцы кнопок с действиями (последний) и столбец с чекбоксом (первый) должны быть зафиксированы.

Пользовательские настройки таблицы

Для удобства пользователя предусмотрена специальная кнопка настройки таблицы. Она располагается в правом верхнем углу таблицы над кнопками действий в теле таблицы и обозначается иконкой pi-sliders. При нажатии на нее появляются функции взаимодействия с таблицей. Стандартными являются:

• Изменить размер
  • Большая
  • Средняя
  • Стандартная
  • Маленькая

Стоит отметить, что по умолчанию должна быть выбран "Стандартный" размер таблицы. Это соответствует классу p-datatable-sm. Подробнее размеры таблицы будут описаны далее в этой статье.

• Отображение колонок
• Группировка по атрибуту

Функция изменения размера таблицы и группировка по атрибуту должны быть доступны по умолчанию. Если в таблице есть древовидное меню, то группировка по атрибуту недоступна, и е не нужно отображать, а вот дать пользователю настроить удобный ему размер - важная функция, ей не следует пренебрегать.

Посмотрите Мастер шаблон таблицы (opens in a new tab) на нашем портале разработчика, чтобы лучше разобраться в реализации данного функционала

Кнопка переключения столбцов

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

Клик на кнопку вызывает выпадающий список с пунктами меню.

Клик на пункт “Отображение колонок” вызывает модальное окно. В нем представлен список с возможностью множественного выбора столбцов. Те, что уже содержатся в таблице, выбраны, а второстепенные столбцы, которые не обязательно показывать сразу, скрыты. Включая/выключая различные чекбоксы, можно редактировать содержание таблицы.

Очередность расположения атрибутов

Слева располагаются наиболее важные атрибуты.
Взаимосвязанные атрибуты располагаются рядом, например, Подразделение и Департамент следует располагать рядом.

🔴 Плохо

🟢 Хорошо

Статусы всегда располагаются справа, за исключением случаев, когда статус - это главный атрибут таблицы.

🔴 Плохо

🟢 Хорошо

Количество строк записи

Запись таблицы должна содержать не более 3-х строк. Дальнейший текст сокращается многоточием. Полную формулировку можно выводить в тултипе.

🔴 Плохо	🟢 Хорошо

Кнопки действий

Кнопки действий в записи всегда располагаются справа. Максимальное количество кнопок - три.
В случаях, когда нужно больше действий, третья кнопка - это кнопка с иконкой многоточия, при клике на которую открывается контекстное меню со списком действий.
Так же важно и то, что в текущем НЕЛЬЗЯ оставлять только кнопку контекстного меню (КМ) - следует вынести два действия, которые пользователь будет совершать чаще всего, чтобы помочь ему избежать лишних кликов на КМ.

🔴 Плохо

🟢 Хорошо

Раскрывающаяся строка

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

В данном случае слева в таблице появляется иконка - chevron-down, при клике на которую раскрывается строка. Правила ее использования следующие:

1. Наименование атрибута имеет жирное начертание;
2. Значение атрибута пишется после двоеточия;
3. Атрибуты и их значения должны быть выровнены по левому краю, а также относительно первого атрибута;
4. В столбце может быть максимум 5 атрибутов;
5. В строке может быть 1-5 атрибутов. Важно сохранять читаемость значений;

Отображение чисел в таблицах

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

Например, 6 320,40 RUB

Отображение иконок в таблицах

Иконки в таблице должны располагаться на фоне-подложке.

Позиционирование на новой записи

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

Легенда

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

1. Cтатус;
2. Тип записи;
3. Тип связи;
4. Активность записи и др., то вместе с иконкой следует использовать легенду или тултип.

Легенда отображается с помощью overlay panel, которая содержит значение иконки/dot и легенду. При клике на Показать легенду overlay panel разворачивается, мы видим легенду.

Важно! Если атрибут может принимать только два значения, например, “Активно”, “Неактивно”, рекомендуем использовать тултип без полной легенды.

Иконки, которые располагаются в таблице и обозначают вид, тип объекта и так далее, должны быть на подложке.

Копирование значения в буфер обмена

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

При наведении на ячейку содержимое подчеркивается пунктирной линией. Кликнув на него, значение копируется в буфер обмена, а в нижнем правом углу появляется тост типа Success с сообщением "Наименование атрибута успешно скопировано в буфер обмена".

Массовые операции

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

Выделение чекбоксами

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

После выбора записи(ей) пагинация сменяет текст на “Выбрано m записей из n”

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

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

После выбора записей также кнопки в шапке таблицы сменяются на:

1. кнопку с иконкой, если действий 2 и больше. При клике на кнопку выпадает список действий;

2. кнопку типа Raised/Error, если действие одно. Для удаления - Danger, для других действий - Raised;

Важно! Если у пользователя нет доступа к тому или иному действию у одной из выбранных записей, то данное действие становится задизайблено для всех выбранных записей. Кейс: пользователь выбрал 3 записи, которые он может редактировать, поэтому ему был доступен весь список массовых действий. После выбора 4ой, редактирование которой ему недоступно из-за ограничения правами, массовое редактирование стало ему недоступно. Пользователь может сбросить выбор этой записи через чекбокс или, нажав на "отменить выделение" во всплывающей подсказке. Тогда отменится выделение всех записей, которые пользователь не может редактировать.

Массовое редактирование

Для редактирования нужно использовать:

1. Сайдбар. В случае, если запись добавляется через сайдбар или если для массового редактирования доступно менее 10 полей.
   По умолчанию поля, которые можно изменить массово, задизейблены. С помощью чекбокса в InputGroup можно раздизейблить поле и изменить.

2. Форму. В случае, если для редактирования доступно более 10 полей.
   Форма должна быть аналогична форме добавления/редактирования. Поля, которые можно редактировать массово имеют переключатели (InputGroup). Данный подход поможет пользователю быстрее сориентироваться в множестве полей, потому что он уже знаком с расположением их на форме. Поля, которые нельзя редактировать массово задизейблены всегда.
   Баннер формы содержит информацию о количестве редактируемых записей.

Массовое удаление

При массовом удалении диалоговое окно содержит информацию о том, сколько записей пользователь удаляет. Пример:

Массовые операции с группами записей

Кейс: массовая операция доступная только для группы записей (например, массово можно редактировать записи только в статусе “Производство”).

1. При выборе записей одной группы (в статусе “Производство”) редактирование доступно.
2. После выбора записи из другой группы редактирование становится недоступно, при наведении курсора на операцию, подсказка подсвечивает причину состояния disabled.

Если осуществляется фильтрация или обновление таблицы, то выбор записей сбрасывается.