НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Таблица данных

Data table строит таблицу из ваших строк и описаний столбцов: с сортировкой, изменением ширины столбцов, выбором строк, раскрывающимися строками и страницами.

Стабильный Figma
ОбзорИспользованиеAPIДоступность 
<tk-data-table label="Quarterly revenue by region" hover></tk-data-table>
<tk-data-table id="revenue" label="Quarterly revenue by region" hover></tk-data-table>
<script>
  const table = document.getElementById('revenue');
  table.columns = [
    { key: 'region', header: 'Region', sortable: true },
    { key: 'lead', header: 'Lead', resizable: true, width: 220 },
    { key: 'revenue', header: 'Revenue', numeric: true, sortable: true },
  ];
  table.data = [
    { id: 'emea', region: 'EMEA', lead: 'Alice Chen', revenue: 1204 },
    { id: 'apac', region: 'APAC', lead: 'Bo Nguyen', revenue: 987 },
    { id: 'amer', region: 'Americas', lead: 'Carla Diaz', revenue: 2130 },
  ];
</script>

Анатомия

Часть Что это
tk-data-table сам элемент; data и columns получает как JS-свойства
подпись скрыта; в ней label, она называет таблицу
кнопка сортировки заголовок сортируемого столбца
ручка ширины край столбца, ширину которого можно менять; тянется мышью или стрелками
столбец выбора чекбокс «выбрать всё» в шапке и по чекбоксу в каждой строке
кнопка раскрытия шеврон в первой ячейке строки с дочерними строками
part scroll контейнер прокрутки

Столбцы

Каждый столбец — объект:

{
  key: string;              // the field on each row, and the column id
  header: string;           // the header text
  align?: 'start' | 'center' | 'end';
  numeric?: boolean;        // end-aligned, tabular figures
  sortable?: boolean;
  resizable?: boolean;
  width?: number;           // initial width in px; unset shares the free space
  minWidth?: number;        // resize limit, default 48
  maxWidth?: number;        // resize limit, default 800
}

Оставьте хотя бы один столбец без width, чтобы таблица заполняла контейнер. Если ширина задана у всех столбцов, таблица будет ровно шириной их суммы.

Сортировка

Задайте столбцу sortable: true. Нажатие на заголовок переключает сортировку по возрастанию, по убыванию и без сортировки. Текущая сортировка — в sort.

Каждое нажатие сначала вызывает tk-sort. preventDefault() на нём отменяет сортировку, и заголовок сохраняет прежний значок.

table.addEventListener('tk-sort', (e) => {
  console.log(e.detail); // { key: 'revenue', direction: 'asc' }
});

Ширина столбцов

Задайте столбцу resizable: true. Тяните ручку на его краю или наведите на неё фокус и используйте стрелки: ← и → меняют ширину на 8px, Home и End ставят minWidth и maxWidth. Пока ручка под курсором, в фокусе или её тянут, по краю столбца через всю таблицу идёт линия.

Каждое завершённое изменение вызывает tk-column-resize. Ширины — в columnSizing.

Выбор строк

selectable добавляет чекбокс в каждую строку и чекбокс «выбрать всё» в шапку. «Выбрать всё» выбирает все строки на всех страницах. Выбор родительской строки выбирает и её дочерние.

Задайте row-key — поле, уникальное и неизменное у каждой строки: по нему хранятся выбор и раскрытые строки. Выбор читается из selectedKeys, изменения приходят в tk-selection-change.

Раскрывающиеся строки

Задайте expandable и положите дочерние строки в children или в поле, указанное в children-key. У строк с дочерними появляется кнопка раскрытия, дочерние идут с отступом. Дочерние строки сортируются внутри своего родителя.

table.expandable = true;
table.data = [
  { id: 'emea', name: 'EMEA', headcount: 120, children: [
    { id: 'uk', name: 'United Kingdom', headcount: 45 },
  ]},
  { id: 'amer', name: 'Americas', headcount: 200 },
];

Страницы

Задайте page-size, и отрисуется только текущая страница. Переключатель страниц — это Pagination, который вы ставите и подключаете сами: по pageCount выводите по пункту на страницу, а при выборе пункта задаёте page (счёт с 0).

<tk-data-table id="records" label="Records" page-size="10"></tk-data-table>
<tk-pagination id="pages" label="Records pages"></tk-pagination>
<script>
  const table = document.getElementById('records');
  const pages = document.getElementById('pages');
  const renderPages = () => {
    pages.innerHTML = Array.from({ length: table.pageCount }, (_, i) =>
      `<tk-pagination-item value="${i + 1}" ${i === table.page ? 'current' : ''}>${i + 1}</tk-pagination-item>`,
    ).join('');
  };
  pages.addEventListener('tk-page-select', (e) => {
    table.page = Number(e.detail.value) - 1;
    renderPages();
  });
  renderPages();
</script>

Порядок столбцов

Чтобы переставить столбцы, задайте columnOrder — массив ключей столбцов. Перетаскивать столбцы мышью нельзя.