Table Cell

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

Размеры

SM 32 · MD 48 · LG 72 — моды коллекции ❖ Table Cell
SM — плотный реестр
Рынок
Объём сделок, млн ₽
Основной рынок
400 000,00
MD — база
Рынок
Объём сделок, млн ₽
Основной рынок
Т+ основной режим
400 000,00₽
140 418шт.
LG — просторный
Рынок
Объём сделок, млн ₽
Основной рынок
Т+ основной режим
400 000,00₽
140 418шт.
Размер несёт мод коллекции, а не ось варианта — свойства Size нет ни у одного из двенадцати наборов макета. Высота задана через min-height, а не height: при двух строках содержимого MD-ячейка ровно 48, а SM растягивается до 41 — так же, как HUG в макете. Фиксированная высота обрезала бы вторую строку.

Разновидности

Восемь публичных наборов — одна ось variant
Разновидность
Ячейка
Что внутри
text
Основной рынок
Т+ основной режим
Основной текст и подпись
amount
400 000,00₽
140 418шт.
Число, суффикс единиц, второе число
element
Только вложенный компонент: иконка, чекбокс, радио, шеврон, тег, ссылка
swap
Исполнено
Произвольный контент приложения
edit-text
Правка значения прямо в таблице
edit-amount
₽
То же для числа; показана рамка ошибки
helpIcon
Комиссия брокера
Иконка справки в строке текста; размер — по лестнице шапки (16 · 16 · 20)
actions
Основной рынок
Слот действий у правого края ячейки — до трёх иконок
Ошибка бывает только у edit-*: она говорит «исправь», а исправлять можно лишь редактируемое. Выключенного состояния у ячейки нет вовсе — «disabled» в таблице означает read-only для роли пользователя, то есть свойство данных, а не состояние ячейки.

Состояния заливки

Шесть вариантов вложенного набора .BG Cell
Обычная
заливки нет — виден контейнер --ds-surface-nb-base
Зебра
--ds-surface-nb-low
Наведение
--ds-nba-20
Нажатие
--ds-nba-ghost-pressed
Наведение на выделенную строку
--ds-info-outline-hover
Нажатие на выделенной строке
--ds-info-outline-active
Фокус
Кольцо внутреннее — inset 0 0 0 2px
Заливка выделенной строки берёт адрес --ds-info-outline-*: у ролей Fill/Info/Ghost/* и Fill/Info/Outline/* в макете тождественная алиас-цепочка во всех четырёх модах — разными их делает обводка, а она живёт в своём токене. Дубль значения не заводился. Кольцо фокуса внутреннее, а не внешнее: общий --ds-focus-ring рисует кольцо снаружи с зазором, и у соседних ячеек оно налезало бы друг на друга.

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

Числа сравниваются по колонке — им правый край
Правильно
Рынок
Объём, млн ₽
Основной рынок
400 000,00
Переговорные сделки
150 000,00
Рынок РЕПО
200 000,00
Неправильно
Рынок
Объём, млн ₽
Основной рынок
400 000,00
Переговорные сделки
150 000,00
Рынок РЕПО
200 000,00
Центрирование данных и заголовков запрещено: разряды перестают стоять друг под другом, и колонка больше не сканируется взглядом. Переменные числа — правый край и моноширинные цифры (tabular-nums). Фиксированные числа — IP-адреса, коды, серийные номера — левый: они не сравниваются. Заголовок всегда выравнивается так же, как данные его колонки.

Границы и итоговая строка

Боковая линия короче ячейки — 28 при высоте 48
Рынок
Объём, млн ₽
Основной рынок
400 000,00
Переговорные сделки
150 000,00
Итого
550 000,00
У итоговой строки линия сверху и жирнее (--ds-stroke-high), снизу линии нет. В макете эта ось называется Total, и её значения перевёрнуты: итоговый вид даёт Total=Off, обычный — Total=On. Проверено по геометрии: линия при Off стоит в y=0, при On — в y=47 при высоте 48. В коде пропс назван по смыслу (total=true → вид итога); расхождение записано, чтобы сверка Figma↔код не читала его как дрейф. Боковая линия — псевдоэлемент, а не border-left: она короче ячейки, обычный бордер растянулся бы на всю высоту.

Линии или зебра — не вместе

Два способа разделить строки
Линии
Основной рынок
Переговорные сделки
Рынок РЕПО
Зебра — нижние границы отключены
Основной рынок
Переговорные сделки
Рынок РЕПО
При зебре видимость нижних границ отключают — иначе визуального шума вдвое больше, чем нужно. Первая строка после шапки всегда с заливкой.

Зебра — это цвет страницы, проступающий сквозь карточку. Контейнер таблицы красится Static/Background-Blue/0 - Base — белым или чёрным по теме и инверсии (#ffffff · #131316 · #020304 · #ffffff). Своей заливки у ячейки в покое нет, сквозь неё виден контейнер. Полосатая строка возвращает шаг страницы 1 - Low (#f6f8fc · #222629 · #1c2023 · #dee4ea), и он отличается от контейнера во всех четырёх темах — переключи тему и сравни две верхние строки в любой из них.

Почему это стоит держать в голове при сборке экрана: контейнер обязан быть именно Base. На High Contrast (#ffffff · #222629 · #1c2023 · #ffffff) зебра совпала бы с ним в Light Invert и Dark, и чередование в этих двух темах пропало бы.

Токены

Коллекция ❖ Table Cell — 22 числовые переменные, моды SM/MD/LG
Токен
SM
MD
LG
Значения ниже читаются из site/tokens.css живым замером в браузере, а не переписаны руками: переписанная таблица протухает молча.

Клавиатура

Ячейка владеет только собой
Клавиша
Действие
Кто исполняет
Tab
Фокус на следующий интерактивный элемент; пустые ячейки пропускаются
Браузер
↓ ↑ ← →
Перемещение между ячейками — в таблице с интерактивными элементами
Таблица
Shift + ↓ ↑ ← →
Прокрутка содержимого по вертикали и горизонтали
Таблица
Enter Space
Активация интерактивного элемента после фокусировки
Вложенный компонент
Esc
Выход из режима взаимодействия с элементами
Таблица
Ячейка принимает фокус (tabindex="-1"), рисует его и не крадёт Tab у своих детей. Всё остальное — перемещение стрелками, прокрутка, roving-tabindex, роль таблицы, порядок обхода — принадлежит таблице, то есть приложению. Это не пробел спеки, а граница компонента.

State Explorer

Интерактивный тест состояний — переключай и смотри