Дизайн таблиц в интерфейсе: сортировка, фильтры и плотность

Главная задача таблицы

Таблица в CRM или админ-панели нужна для двух вещей: сканировать и сравнивать данные и быстро действовать над записями. Каждое дизайн-решение стоит проверять вопросом: стало ли проще найти нужную строку и сделать с ней что-то?

Базовые правила:

• текст выравнивается влево, числа — вправо;
• важные колонки идут первыми;
• шапка остаётся видимой при прокрутке;
• действия доступны без лишних переходов.

Выравнивание и форматирование

Для чисел используйте моноширинные цифры (font-variant-numeric: tabular-nums), одинаковое количество знаков после запятой и разделитель разрядов. Заголовок колонки выравнивайте так же, как её содержимое.

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

Приоритет колонок

• Первой ставьте колонку, по которой человек узнаёт запись: имя клиента, номер заказа.
• Дальше — то, по чему принимают решения: статус, сумма, дата.
• Служебные поля (ID, дата создания) — в конец или в скрытые по умолчанию.
• Дайте возможность настроить набор колонок и запоминайте выбор.
• Длинный текст обрезайте с многоточием и показывайте полностью по наведению или в карточке записи.

Закреплённые шапка и первая колонка

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

th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
td:first-child, th:first-child { position: sticky; left: 0; background: var(--surface); }

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

Режимы плотности

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

• Компактный режим — больше строк на экране, меньше отступов.
• Стандартный — баланс по умолчанию.
• Свободный — проще читать, удобнее на сенсорных экранах.

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

Сортировка и фильтры

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

Действия в строке и массовый выбор

Inline-действия (редактировать, открыть, удалить) размещайте в последней колонке. Частое действие — видимой иконкой, редкие — в меню «⋯». Показ только по наведению не работает на сенсорных экранах и с клавиатуры.

Массовый выбор:

• чекбокс в первой колонке и «выбрать всё» в шапке;
• при выборе появляется панель действий с количеством выбранных строк;
• если записей больше, чем на странице, уточните: выбрано всё на странице или все результаты;
• опасные массовые действия подтверждайте, обратимые — сопровождайте отменой.

Пагинация, подгрузка и пустые состояния

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

Таблицы на мобильных

Широкую таблицу нельзя просто сжать. Варианты:

• Карточки: каждая строка становится карточкой с 2–4 главными полями и переходом к деталям.
• Горизонтальная прокрутка с закреплённой первой колонкой — когда важно сравнение по колонкам.
• Выбор колонок: на узком экране показываются только приоритетные.

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