refactor(DataTable): enhance table styling and functionality with fixed action column, improved striped rows, and new props for UX customization

2026-02-16 15:56:28 +07:00
parent 1fe9cf4794
commit af8af84ab7
3 changed files with 84 additions and 13 deletions
@@ -0,0 +1,43 @@
+# Таблицы: 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` и общих обработчиков.