AIST.tech DS / Components / Tables & Data

Tables & Data.

Таблицы — главный инструмент аналитики и админок. Цель: дать прочитать данные за один взгляд, не утопить в линиях, дать управление без шума. Tabular figures для чисел — всегда.

Анатомия

Базовая таблица: header в caps-метках, тонкая граница между строками, hover-подсветка строки. Без вертикальных линий между колонками — расстояние делает работу.

— базовая таблица, default density

Продукт	Регион	Звонки	Конверсия	Статус
Voice Operator	RU	18 421	28.1%	active
MI Analyst	RU / KZ	9 870	22.4%	active
Doc Reader	RU	12 005	19.7%	degraded
Custom LLM	RU / EU	7 995	25.6%	paused

Принципы анатомии

Header — caps 0.6875rem. Это этикетка колонки, не заголовок секции.
Только горизонтальные линии. Вертикальные — табличная сетка старого Excel.
Hover на строку, не на ячейку. Строка — единица чтения.
Без zebra-stripes. Поочерёдная заливка — рудимент бумажных распечаток.
Никаких иконок в заголовке колонки кроме sort-индикатора.

Плотность

Три режима — см. Density & Information. По умолчанию default; dense — для аналитических отчётов с 100+ строками; relaxed — для коротких списков (5–10 строк) с rich-ячейками.

— dense (24px row, 0.8125rem text) — для аналитики

Week	Product	Calls	Conv	Δ wk	Δ qtr	Health
W1	Voice Operator	1 421	27.4%	+1.2	+5.8	ok
W2	Voice Operator	1 532	28.1%	+0.7	+6.5	ok
W3	Voice Operator	1 489	26.8%	−1.3	+5.2	watch
W4	Voice Operator	1 612	29.4%	+2.6	+7.8	ok
W5	Voice Operator	1 588	28.9%	−0.5	+7.3	ok
W6	Voice Operator	1 701	30.2%	+1.3	+8.6	ok
W7	Voice Operator	1 092	22.1%	−8.1	+0.5	incident

— relaxed (52px row, 0.9375rem text) — для rich списков

Клиент	Контракт	ARR	Менеджер
МТ М.Видео — Эльдорадо contract-2026-018	Voice Operator Pro	14 800 000 ₽	А. Калинин
ХЛ Хлебпром Сибирь contract-2026-024	MI Analyst	3 200 000 ₽	А. Калинин
КБ Колор Бизнес Логистика contract-2026-031	Custom LLM + Doc Reader	21 500 000 ₽	Е. Гиль

Числовые ячейки

Все числа — tabular figures, моноширинно, выравнены вправо. Это закон, не опция. Колонки чисел сравнивают глазами — одинаковая ширина цифр обязательна.

— числа: tabular-nums, моно, right-aligned

Метрика	Q1	Q2	Q3	Q4	YoY
Звонки	48 291	52 104	61 880	72 451	+50.1%
Конверсия	23.8%	24.1%	25.4%	26.9%	+3.1 п.п.
Cost / call	12.40 ₽	11.80 ₽	10.90 ₽	9.40 ₽	−24.2%
NPS	42	48	51	54	+12

Форматирование

Тысячи	Тонкий неразрывный пробел ` ` между разрядами: 48 291. Не запятая, не точка.
Проценты	Без пробела: 23.8%. Точка — десятичный разделитель.
Деньги	Сумма + неразрывный + знак валюты: 12 400 ₽. Знак валюты после, как в русской типографике.
Пустота	Em-dash «—», цвет `muted`. Не 0, не N/A, не пустая ячейка.
Точность	Чем больше число — тем меньше знаков. 1 234 567 ₽, не 1 234 567.42 ₽.

Статус и дельты

Пять статусов — ok, warn, err, muted, и нейтральный. Дельты — знак, цвет, проценты или п.п. — но никогда стрелки↑↓ в тексте (избыточно с цветом и знаком).

— статусы строки

Запрос	Источник	Confidence	Статус
Топ-5 продуктов Q4	cc_calls_2026q4	94%	verified
Отказы по неделям	cc_calls_2026q1	87%	verified
Прогноз ARR на Q2	contracts_2026	62%	low confidence
Сегментация клиентов	—	—	no data
Тест-черновик	—	—	draft

Сортировка

Кликабельный header — стрелка↑↓ справа. По умолчанию ничего не сортировано (показываем естественный порядок: даты, ID). Клик — сортировать asc; повторный — desc; третий — сбросить.

— сортировка по колонке «Конверсия» ↓

Продукт	Звонки	Конверсия	Cost/call	Статус
Voice Operator	18 421	28.1%	9.20 ₽	active
Custom LLM	7 995	25.6%	14.80 ₽	active
MI Analyst	9 870	22.4%	8.10 ₽	active
Doc Reader	12 005	19.7%	11.50 ₽	degraded

Выбор и bulk actions

Чекбокс в первой колонке. Когда строки выбраны — над таблицей появляется чёрная панель с контекстными действиями. Без выбора — панели нет.

— 2 строки выбраны, bulk bar активен

2 выбрано

Запрос	Автор	Создано	Статус
Топ-5 продуктов Q4	А. Калинин	12.04	done
Отказы по неделям	Е. Гиль	11.04	done
Прогноз ARR	А. Калинин	10.04	running
Сегментация клиентов	М. Сафин	08.04	draft

Sticky колонки и header

Когда колонок больше 5 и идёт горизонтальный скролл — первая колонка остаётся на месте (label), header при вертикальном скролле тоже фиксируется.

— sticky-first column, прокрути таблицу →

Регион	W1	W2	W3	W4	W5	W6	W7	W8	W9	W10	W11	W12	YTD
Москва	1 421	1 532	1 489	1 612	1 588	1 701	1 092	1 645	1 720	1 802	1 850	1 921	19 373
СПб	821	932	889	1 012	988	1 101	692	1 045	1 120	1 202	1 250	1 321	12 373
Екатеринбург	521	632	589	712	688	801	392	745	820	902	950	1 021	8 773
Алматы	321	432	389	512	488	601	292	545	620	702	750	821	6 473

Над таблицей — поиск, кнопки-фильтры, переключатель плотности. Кнопки фильтра — ghost, с числом активных значений. Поиск — по первой видимой колонке (label).

— toolbar + table + pagination — полный паттерн

Запрос	Автор	Создано	Длительность	Статус
Топ-5 продуктов Q4	А. Калинин	12.04 11:42	3.2 с	done
Отказы по неделям	Е. Гиль	12.04 09:18	8.7 с	done
Прогноз ARR на Q2	А. Калинин	11.04 17:55	running	running
Сегментация клиентов	М. Сафин	11.04 14:02	12.4 с	done
Heatmap по дням	Е. Гиль	10.04 16:11	4.1 с	done

Пагинация

Простая нумерация в конце — стрелка, страницы, стрелка. Для коротких списков (≤ 20 строк) пагинации нет вообще. Для длинных (> 500) — добавить page-size dropdown и «Перейти на стр.» input.

До 20 строк	Без пагинации. Показать всё.
20–500	Простая пагинация. 20 на странице по умолчанию.
500+	+ Page-size picker (20 / 50 / 100), + «Перейти на стр.».
Стриминг данных	Infinite scroll — только если строки можно «забыть» (лог, чат). Не для аналитики.

Богатые ячейки

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

— avatar + name, mini-bar, sparkline в одной таблице

Менеджер	План	Прогресс	YTD
АК А. Калинин	24 000 000 ₽	78%	18 720 000 ₽
ЕГ Е. Гиль	18 000 000 ₽	92%	16 560 000 ₽
МС М. Сафин	12 000 000 ₽	45%	5 400 000 ₽

Empty / Loading

Состояния пустоты и загрузки внутри таблицы. Голос — см. Empty / Error / Loading. Здесь — как именно их разместить в таблице.

— empty state: пусто после фильтра

Запрос	Автор	Создано	Статус

Запросы не найдены Под фильтр «Автор: М. Сафин» в этом квартале ничего не попало.
Попробуйте расширить период или сбросить фильтры.

— loading state: скелетон строк

Запрос	Автор	Создано	Статус

Правила

Когда таблица — правильный выбор

Таблица	Сравнение значений по нескольким колонкам. Сортировка важна. 10+ строк.
Карточки list	Каждый элемент имеет «личность» (название, аватар, действия). Колонок мало (2–3).
График	Тренд во времени, распределение, доли. Точные значения вторичны.
KPI-блок	Одно число — главное. Δ к прошлому периоду, мини-спарклайн.

Do / Don't

DO Числа — mono, tabular, right. Всегда. Это закон. Колонка сравнивается глазами.

DON'T Спанить числа sans-serif. Цифры «0» и «1» будут разной ширины — колонка поплывёт.

DO Hover на строку. Чёткий feedback, что строка — единица.

DON'T Zebra-stripes. Это шум из 80-х. Граница между строками работает лучше.

DO Sort by default — по «главной» колонке. Запросы — по дате ↓. Клиенты — по ARR ↓. Менеджеры — по % плана ↓.

DON'T Алфавит как default. Алфавит — это «я не подумал, что тут важно».

DO Em-dash «—» для пустоты. Цвет muted. Это признак, что там нет данных, а не ноль.

DON'T «N/A» или «—» в foreground. Пустота должна тихо опускаться, не кричать.

DO Status pill — short noun. active, running, verified, paused.

DON'T «В процессе обработки» в колонке. Pill — это ярлык. Длинный текст ломает строку.

Сравнение режимов

Default	40 px row, 14 px text. ЛК-листинги, админка, settings.
Dense	24 px row, 13 px text. MI Analyst, отчёты, 50+ строк.
Relaxed	52 px row, 15 px text. Списки клиентов, контрактов, людей.

Токены

Header	caps 0.6875rem, weight 600	letter-spacing 0.08em, muted-foreground
Row height	40 / 24 / 52 (default / dense / relaxed)	padding 14 / 8 / 18
Body cell	0.875rem, line-height 1.4	font-body
Number cell	0.8125rem, font-mono, tabular-nums	text-align right
Border	1px solid var(--border)	только bottom, не vertical
Hover row	background var(--muted)	no transition — моментально
Selected row	rgba(0,72,178,0.04)	тонкий primary tint
Status ok	rgba(34,197,94,0.10) / #15803D	bg / text
Status warn	rgba(245,158,11,0.10) / #B45309	bg / text
Status err	rgba(220,38,38,0.10) / var(--destructive)	bg / text
Checkbox	16 × 16, 1.5 px border	foreground filled when checked