Table

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

Storybook Исходники

Обзор

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

Публичные CSS-переменные

Plan	Per month
Starter	$9
Team	$29

Переменная	Значение	Влияет на
Разделители строк.`TableRow`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные частей

Table: обрабатывает флаги раскладки на всю ширину и высоту.
TableRow: задаёт границы строк через --border-color.
TableHeading: отвечает за отступы и выравнивание ячеек заголовков.
TableData: отвечает за отступы и выравнивание ячеек данных.

Взаимодействие состояний и вариантов

dataAlign меняет выравнивание и ячеек заголовков, и ячеек данных.
edgePadded={false} убирает краевые отступы у первой и последней ячейки, чтобы выровнять таблицу с окружающей раскладкой.
fullWidth и fullHeight влияют на раскладку, но не меняют семантическую структуру.

Примеры

.brandTable {
  --border-color: var(--separator-opaque);
}

.compactTable td,
.compactTable th {
  padding: var(--spacing-4);
}

Не переопределяйте

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