denozord
af8af84ab7
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m52s
44 lines
3.2 KiB
Markdown
44 lines
3.2 KiB
Markdown
# Таблицы: 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` и общих обработчиков.
|