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

Рекомендации по формированию таблиц в приложении — [Tabler Tables](https://docs.tabler.io/ui/components/tables/), [Preview](https://preview.tabler.io/tables.html).

## Классы (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` и общих обработчиков.