ДокументацияРазделы, компоненты, системы и их подразделы
Таблицы
Структурированное представление данных
Data Display
Таблица показывает данные без интерактивной логики
Используйте Table для структурированного сравнения строк и колонок. Если нужны фильтрация, сортировка, группировка или изменение ячеек, выбирайте Data Grid.
Базовое использование
Обёртка отвечает за поверхность и горизонтальную прокрутку. Если таблица не помещается, удерживайте Shift и тяните её мышью.
| Участник | Роль | Команда | Активность | Действия |
|---|---|---|---|---|
| Анна Смирнова | Product designer | Продукт | Сегодня, 12:40 | |
| Михаил Орлов | Frontend developer | Разработка | Сегодня, 11:15 | |
| Ольга Волкова | Аналитик | Исследования | Вчера, 18:20 |
.ox-table-wrap + .ox-table
.ox-table-hovered
HTMLБазовая структура
<div class="ox-table-wrap" data-ox-ui="table">
<table class="ox-table ox-table-hovered">
<caption>Участники проекта</caption>
<thead>
<tr>
<th scope="col">Участник</th>
<th scope="col">Роль</th>
</tr>
</thead>
<tbody>
<tr><td>Анна</td><td>Дизайнер</td></tr>
</tbody>
</table>
</div>Компактная плотность и выбранная строка
Compact уменьшает отступы ячеек. Состояние selected выделяет строку, но выбор и снятие выбора остаются ответственностью приложения.
| Счёт | Контрагент | Сумма | Срок |
|---|---|---|---|
| INV-2048 | Atlas Group | 148 000 ₽ | 20 августа |
| INV-2049 | North Lab | 76 500 ₽ | 24 августа |
| INV-2050 | Vega Studio | 212 000 ₽ | 2 сентября |
.ox-table-compact
.ox-table-bordered
.ox-table-striped
.ox-table-row.is-selected
.ox-table-cell-muted
Публичные классы
Модификаторы можно комбинировать с семантической HTML-структурой таблицы.
.ox-table-wrapПоверхность и контейнер горизонтальной прокрутки..ox-tableБазовая типографика, сетка и состояния строк..ox-table-compactУменьшенная вертикальная и горизонтальная плотность..ox-table-hoveredПодсвечивает строку при наведении курсора..ox-table-borderedДобавляет вертикальные границы между ячейками..ox-table-stripedЧередует фон чётных и нечётных строк..ox-table-borderlessУбирает горизонтальные разделители строк..ox-table-row.is-selectedВизуально выбранная строка..ox-table-cell-mutedВторичная информация внутри ячейки..ox-table-actionsВыравнивает колонку действий по правому краю..ox-table-checkФиксированная ширина колонки с элементом выбора.data-ox-ui="table"Включает Shift-drag только при горизонтальном переполнении.
Сохраняйте смысл таблицы
Визуальная сетка не заменяет корректную семантику заголовков, подписи и действий.
<caption>Кратко объясняет, какие данные находятся в таблице.scope="col"Связывает заголовок с соответствующей колонкой.<th scope="row">Подходит для ячейки, которая называет всю строку.aria-labelНужен кнопке действия, если одной видимой иконки недостаточно.