Table

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

Атомарным элементом таблицы является ячейка. Ячейки образуют столбцы и строки таблицы. Также у таблицы всегда есть заголовок.

§Ячейка таблицы

Ячейка представляет собой контейнер на пересечении строки и столбца таблицы, в который могут быть помещены другие компоненты:

• тексты;
• иконки;
• кнопки;
• лейблы;
• аватар пользователя;
• прогресс бар;
• чекбокс;
• селект;
• инпут и другие компоненты.

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

Ячейка может быть пустой при отсутствии данных для отображения. Кроме того, содержимое ячейки может быть скрыто в обычном состоянии и появляться при наведении курсора на ячейку или строку.

§Рекомендации по использованию компонентов

• Не используйте больше трех разных компонентов в одной ячейке, так как в этом случае данные в столбце, где есть такие ячейки, становится тяжелее сравнивать между собой, и ухудшается читаемость таблицы. Если такое происходит, то свойство, которое описывает каждый компонент, можно вынести в отдельный столбец.
• Подбирайте размеры компонентов в таблице исходя из задачи. Для простых текстовых данных лучше чаще всего применяется стиль текста text-body-1 без декорирования, а для остальных элементов — размеры М.
• Внутри одной ячейки рекомендуется использовать компоненты одного размера, например, лейблы и кнопки размера M.

§Высота и ширина ячейки

Размер ячейки определяется размером её содержимого и отступами до него.

Стандартная высота ячейки ячейки с текстом в одну строку, имеющим стиль text-subheader-1 (интерлиньяж 18рх), равна 40рх. При этом отступы сверху и снизу будут равны 11рх.

Для ячейки с текстом в две строки высота ячейки будет составлять 58рх.

Отступы сверху и снизу, слева и справа могут быть любыми, но рекомендуется использовать систему отступов, кратную 4px. Отступы сверху и снизу обычно делаются одинаковыми, но они могут и различаться. Это справедливо и для отступов слева и справа (подробнее об этом см. в описании строк и столбцов таблицы). Отступы сверху и снизу не обязательно должны быть равны отступам слева и справа.

§Разделитель

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

§Выравнивание

Контент внутри ячейки может быть выровнен по левому или правому краю (подробнее о выравнивании текста см. в описании колонок).

§Заголовок таблицы

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

Не рекомендуется использовать названия колонок в две строки, чтобы не было переносов. При переносе названия на вторую строку (и далее) высота всего заголовка увеличивается. Другие названия и кнопки при этом остаются выровненными по верхнему краю.

§Столбцы таблицы

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

• отсортированы;
• выровнены по правому краю.

§Сортировка

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

Сортировка является опциональным функционалом в таблице. Ее наличие определяется пользовательскими сценариями.

Сортировка одновременно по двум столбцам невозможна.

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

§Выравнивание по правому краю

Доступно только для текстовых данных и применяется тогда, когда данные необходимо сравнивать между собой (например, количество потраченного времени или объём потребляемых ресурсов). Чаще всего такие данные имеют одинаковую размерность и для них доступна сортировка. В случае если данные в столбце выровнены по правому краю и есть стрелка сортировки, то сначала располагают стрелку, а потом текст.

§Фиксация столбцов при скролле

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

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

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

§Настройка столбцов

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

§Строки таблицы

Строка — это все ячейки, расположенные горизонтально.

§Кликабельные строки

По клику на строку таблицы может происходить переход на другую страницу, открытие модального окна или сайдбара. При наведении курсора на такие строки цвет фона меняется на --g-color-base-simple-hover.

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

§Строки с групповыми операциями

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

Если строка выбрана, цвет её фона меняется на --g-color-base-selection, а внизу страницы появляется action bar со списком групповых действий.

Если для разных строк таблицы доступны разные действия, то в action bar рекомендуется показывать только те действия, которые доступны для всех выбранных строк. Иное поведение также возможно и остается на усмотрение дизайнера.

§Выравнивание контента

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

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

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

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

§Рекомендации по использованию

Таблица применяется:

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

Не рекомендуется:

• Применять таблицу для описания объектов, имеющих только одно свойство. В этом случае лучше использовать список. Например, информацию о названии цвета и его кодировке в HEX лучше представлять в виде списка.
• Применять таблицу для описания объектов, имеющих разные уникальные свойства. В этом случае лучше описывать каждый объект отдельно. Например, если стоит задача описать устройства, которые использует сотрудник. Среди таких устройств может быть ноутбук (свойства: ОС, объём накопителя, диагональ), компьютерная мышь (свойства: проводная или беспроводная), настольная лампа (свойства: производитель, тип крепления). Все эти данные не стоит сводить в одну таблицу и лучше применить другой способ их визуализации.