Атрибут data-* тега <table>

Описание

Атрибуты data-* позволяют хранить пользовательские данные непосредственно в элементе <table>. Эти атрибуты не влияют на отображение таблицы, но могут быть использованы JavaScript для различных функций.

Пример использования:
<table data-table-id="user-grid" data-sortable="true" data-pagination="10"> <tr> Имя Возраст </tr> <tr data-user-id="42"> Иван Иванов 28 </tr> </table>

Синтаксис именования:

Правило Пример Некорректный пример
Префикс data- data-table-id table-id
Формат имени data-sort-direction data-SortDirection
Регистр символов data-page-size data-PageSize

Пример использования с JavaScript:

<table id="data-table" data-dynamic="true" data-default-sort="name"> <!-- Содержимое таблицы --> </table> <script> const table = document.getElementById('data-table'); if (table.dataset.dynamic === 'true') { console.log('Таблица поддерживает динамическую загрузку'); console.log('Сортировка по умолчанию:', table.dataset.defaultSort); } </script>

Рекомендации:

  • Используйте для хранения конфигурации таблицы
  • Применяйте для связи строк таблицы с ID данных
  • Храните простые значения (строки, числа, булевы)
  • Для сложных данных используйте JSON в одном атрибуте

Ограничения:

  • Значения всегда преобразуются в строки
  • Не предназначены для стилизации (используйте классы)
  • Избегайте хранения больших объемов данных

Примечание: Для сложных табличных компонентов с сортировкой и пагинацией атрибуты data-* идеально подходят для хранения настроек и состояния таблицы.