router-lists-ui/frontend/docs/TABLE_UX.md

Таблицы: UX/UI по Tabler и проекту

Рекомендации по формированию таблиц в приложении — Tabler Tables, Preview.

Классы (Tabler)

• Базовые: table card-table table-vcenter table-nowrap mb-0
• Чередование строк: table-striped — улучшает читаемость
• Компактный режим: table-sm — меньше отступы в ячейках
• Обёртка: table-responsive вокруг <table>
• Обрезка длинного текста: для ячейки использовать td-truncate (Tabler) или text-truncate + max-width

Компонент DataTable

Используйте DataTable там, где подходит декларативное описание колонок и общие действия (сортировка, выбор, пагинация):

• columns: { key, title, sortable?, icon?, render?, tooltip? } — для подсказки по заголовку задайте tooltip
• striped={true} по умолчанию
• compact={true} — компактные ячейки
• Колонка «Действия» получает класс td-actions (фиксированная минимальная ширина в проекте)

Информативность и лаконичность

1. Заголовки колонок — короткие, при необходимости уточнение через tooltip (например, значение иконки замка).
2. Действия в строке — иконки с Tooltip и aria-label; колонка «Действия» справа, без лишнего текста.
3. Копирование — кнопка/иконка копирования рядом с ячейкой (IP, домен и т.д.) вместо дублирования в «Действия», если это основной сценарий.
4. Пустое состояние — через emptyState в DataTable или свой блок с призывом к действию (импорт, добавление).

Доступность

• У заголовков: scope="col".
• У таблицы: role="grid" при семантической сетке данных.
• Кнопки действий: aria-label и/или Tooltip.

Где таблица своя, а не DataTable

В IPRangesManager, DomainsNewManager, ServerManager и др. таблицы рендерятся вручную. Для единообразия:

• Те же классы: table card-table table-vcenter table-nowrap mb-0, при желании table-striped.
• Заголовки: th с scope="col", короткий текст, при необходимости иконка и тултип.
• Колонка действий: класс td-actions у th и td, кнопки с тултипами.

При рефакторинге страниц можно постепенно переводить такие таблицы на DataTable с описанием columns и общих обработчиков.