ADS Artemy Design System
ADS / tables / standard

Таблицы

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

Анатомия таблицы

Название, вывод, header, body, статус, источник и состояния.

ADS-TB-001

Вывод: один модуль требует действия сейчас, два модуля в норме

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

Статусы модулей шкафа
Модуль Статус Что важно Сигнал Обновлено Действие
CAM-02 норма Вижу все лотки 94% 12:48
CAB-01 риск Мяса меньше плана 72% 12:47
OIL-01 действие Проверь повторно через 40 минут 81% 12:10
CAM-04 нет связи Нет сигнала 17 минут 0% 12:31
Источник: BI / Kitchen pilot. Hover note раскрывает причину без изменения layout.

Как делать

  • Перед таблицей дай короткий вывод.
  • Статус всегда текстом, не только цветом.
  • Числа выравнивай вправо, ID и время держи mono.

Смотреть

  • Hover не должен менять высоту строки.
  • Row action справа, максимум 1-3 действия.
  • Header короткий, единицы измерения прямо в названии.

Не делать

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

Колонки и типы данных

Перед версткой таблицы реши, какие данные сравниваются и как они должны выравниваться.

ADS-TB-002
Текстleft / sans / 13-15px

Названия, выводы, next step. Не делай mono для обычной фразы.

ID и кодыleft / mono / 11-13px

Модули, патенты, версии, артикулы: CAM-02, US8497691B2, v0.3.

Числаright / tabular / mono

Проценты, деньги, дельты, счетчики. Все числа в колонке выровнены одинаково.

Статусbadge / dot + text

Цвет только помогает, но смысл всегда написан текстом: норма, риск, нет связи.

Header

  • Короткий label, единица измерения прямо в заголовке.
  • Если есть сортировка, иконка не должна менять ширину колонки.

Body

  • Одна строка - одна сущность: модуль, ресторан, патент, критерий.
  • Длинные пояснения уводи в note, detail row или документ.

Footer

  • Пиши источник, дату, период и оговорки.
  • Не прячь единицы измерения и источник в tooltip.

Hover, focus, expand

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

ADS-TB-003
Модуль Статус Причина Сигнал, % Действие
CAM-02 норма Вижу все лотки 94
› CAB-01 риск Мяса меньше плана 72
ИсточникКамера 02 + прогноз заказов
ПричинаЧерез 8 минут ожидается пик стрипсов
Next stepДобавить 6 стрипсов и подтвердить действие
CAM-04 нет связи Нет сигнала 17 минут 0
Наведи на ячейки: строка подсвечивается мягко, ячейка получает тонкий focus, колонка получает очень слабую подложку.

Row hover

  • Фон строки очень мягкий: 2-4% темного или белый overlay.
  • Не меняй высоту, padding, border width и шрифт.
  • Selected row можно держать постоянно тонкой левой полосой.

Cell / column

  • Cell hover нужен для точного значения или hover note.
  • Column hover полезен в сравнениях и числовых таблицах.
  • Подсветка колонки должна быть слабее подсветки ячейки.

Expand

  • Detail row раскрывается 200-300 ms fade/slide.
  • Внутри detail только причина, источник и next step.
  • Не раскрывай тяжелые формы внутри каждой строки.

Сортировка, действия, закрепление

Интерактивность должна помогать сравнивать, а не превращать таблицу в шумный интерфейс.

ADS-TB-004

Сортировка

  • Сортируемые колонки отмечай в header, но не меняй ширину при active state.
  • Единицы измерения остаются в header: "Выручка, ₽", "Сигнал, %".
  • Для чисел сортировка чаще важнее фильтра.

Row actions

  • Действия справа, максимум 3.
  • Критичное действие показывай постоянно.
  • Вторичные действия можно показывать на hover, но строка не должна прыгать.

Sticky

  • Sticky header нужен после 12-15 строк или при горизонтальном scroll.
  • Header светлый, высота не меняется.
  • Sticky не должен перекрывать topbar.

Плотность и отступы

Плотность выбирается по сценарию: BI, документ, touch-экран или таблица сравнения.

ADS-TB-005
compact

Compact

Row 36-40 px, padding 8-10 px. Для документов, приложений и плотных сравнений.

standard

Standard

Row 44-52 px, padding 12-16 px. База для BI и рабочих панелей.

touch

Comfortable

Row 56-64 px, padding 16-20 px. Для планшета, кухни, перчаток и сервисных действий.

Типы таблиц

Одни правила, разные сценарии: BI, документ, сравнение, сервис, патентный анализ.

ADS-TB-006

BI table

  • Summary над таблицей: главный вывод и период.
  • Sticky header, фильтры сверху, числа вправо.
  • Статусы бейджами, hover note для причины отклонения.

Document table

  • Компактнее, без обязательного hover.
  • Можно переносить текст, но не длинные цитаты в ячейках.
  • Источник и дата под таблицей обязательны.

Comparison table

  • Первая колонка - критерий, варианты идут по колонкам.
  • Рекомендация выделяется тонким акцентом.
  • Итоговая строка обязательна.

Service table

  • ID модуля mono, last seen mono, next step коротко.
  • Критичное действие показывать постоянно.
  • Причину ошибки уводить в hover note или detail row.

Patent / analysis table

  • ID патента mono, источник и дата обязательны.
  • Длинные цитаты не класть в ячейки, только короткий признак и вывод.
  • Колонка "вывод" важнее колонки "описание".

Checklist table

  • Строка - проверяемое требование.
  • Статус короткий: ok, риск, нет, нужно решение.
  • Next step обязателен для незакрытых строк.

Примеры таблиц

Один visual language, но разные задачи: сравнить, доказать, выбрать, зафиксировать.

ADS-TB-007

Comparison table

КритерийКорпус AКорпус BКорпус C
Монтаж без сверлениянетдада
Мойка и жиррискнорманорма
Себестоимость1.0x1.2x1.8x
Итогдешево, но слабое обслуживаниерекомендовано для пилотадорого для первой версии
Рекомендация выделена тонким акцентом, не заливкой всей колонки.

Document table

ТребованиеРешениеСтатусПримечание
Не сверлить шкафКрепление на существующие болтыокПроверить на двух моделях
Видеть статус издалекаLED-полоса + текст на экранеуточнитьНужен тест яркости
Обслуживание без инженераСъемная крышка и маркировкадействиеДобавить пиктограммы
Источник: ТЗ ВИТ Field System, версия 0.4, 2026-05-06.

Состояния таблицы

У каждой таблицы должны быть loading, empty и error. Пустота тоже проектируется.

ADS-TB-008

Собираю события

Header можно показать сразу, body заменяется skeleton rows. Не прыгать высотой после загрузки.

0

За период событий нет

Пустое состояние объясняет причину и следующий шаг. Не писать просто "нет данных".

!

Не загрузились статусы

Покажи последнюю успешную загрузку и действие: обновить, проверить BI, открыть сервис.

Микротекст и hover

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

ADS-TB-009
Не такТакПочему
Нет данныхЗа этот период событий нетПустота объяснена
Ошибка загрузкиНе загрузились статусы шкафовПонятно, что сломалось
Превышение порогового значенияМяса меньше планаЧеловеческий язык
Требуется вмешательство оператораПроверь модульЕсть действие

Hover note

Используй hover note для причины отклонения, источника данных, технического комментария или даты обновления. Текст максимум 1-2 строки, появление 120-180 ms, без изменения layout.

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

Финальный чек-лист

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

ADS-TB-010

Чек-лист перед публикацией

  • Перед таблицей есть короткий вывод.
  • Header короткий, единицы измерения указаны.
  • Числа выровнены вправо, ID/даты/версии в mono.
  • Статусы содержат текст, не только цвет.
  • Hover не меняет layout и не перекрывает важную ячейку.
  • Есть loading, empty и error.

Запрещено

  • Тяжелые вертикальные линии и темная zebra-разметка.
  • Фоновая сетка под таблицей.
  • Цвет всей строки как единственный статус.
  • Длинные цитаты и логи внутри ячейки.
  • Таблица там, где нужна одна рабочая команда.
  • Больше 3 действий в строке.

CSS-скелет

Минимальный код для таблицы ADS. Дальше добавляй статусы, hover note и состояния.

ADS-TB-011
CSS classes / tokens 
.ad-table-shell {
  overflow: auto;
  border: 1px solid var(--ds-warm-line);
  border-radius: var(--ds-radius-16);
  background: rgba(255, 255, 255, 0.68);
}

.ae-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.ae-table th {
  position: sticky;
  top: 0;
  background: rgba(250, 248, 244, 0.96);
  font-family: var(--ds-font-mono);
}

.ae-table th,
.ae-table td {
  border-bottom: 1px solid var(--ds-warm-line);
  padding: 13px 14px;
}

.ae-table .num {
  text-align: right;
  font-family: var(--ds-font-mono);
  font-variant-numeric: tabular-nums;
}