Реализация
-
Для корректной работы компонента разрешено использовать только один тип данных (prop или slot).
-
Для негативного состояния предусмотрен слот
empty-message, который отображается в контейнере таблицы в случае отсутствия данных в таблице. -
Ширина таблицы по умолчанию 100%, ограничивается шириной сетки или контейнера, но можно включить автоширину по содержимому.
-
Для использования более сложных данных, а также компонентов внутри ячеек, предусмотрена реализация данных в виде слота.
-
По-умолчанию текст переносится на новую строку, опционально можно запретить, тогда текст будет сокращаться многоточием с выводом нативного тайтла.
-
По-умолчанию бордер включен, опционально можно отключить.
-
Есть возможность отключения вертикального внутреннего отступа в ячейках.
-
Можно запретить перенос текста на уровне ячейки при помощи свойства
no-wrap. -
Можно отключить вертикальные отступы на уровне ячейки при помощи свойства
no-vertical-pad. -
В таблице с однострочным текстом, если текст скрывается многоточием, по навидении отображается всплывающая подсказка с полным текстом.
-
Для вертикального выравнивания текста таблицы относительно других текстовых элементов страницы необходимо использовать комбинацию сетки.
Лучшие практики
- Если дополнительных действий (кнопок) в строке больше 2-х, иконкой выводится основное действие, остальные скрываются в «меню действий».
Выравнивание данных
-
Выравнивание заголовков соответствует выравниванию содержимого.
-
По-умолчанию данные выравниваются слева, опционально можно выравнить по центру или справа.
-
Числовые данные необходимо выравнивать справа.
-
Иконка сортировки зависит от выравнивания контента в колонке — при выравнивании текста слева, иконка сортировки показывается справа от заголовка, при выравнивании справа, иконка показывается слева от заголовка.
Клавиатура
-
Tab – перемещение фокуса по элементам таблицы (ссылки, кнопки и т.п.).
-
Shift + Tab – перемещение фокуса назад.