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

Таблица

Table оформляет обычную <table>, которую вы пишете сами, и даёт прокрутить её с клавиатуры, если она не помещается по ширине.

Стабильный Figma
ОбзорИспользованиеAPIДоступность
Quarterly revenue by region
RegionQ1Q2
North1,2041,310
South9871,045
Total2,1912,355
 
<tk-table>
  <table>
    <caption>Quarterly revenue by region</caption>
    <thead><tr><th scope="col">Region</th><th scope="col" data-numeric>Q1</th><th scope="col" data-numeric>Q2</th></tr></thead>
    <tbody>
      <tr><th scope="row">North</th><td data-numeric>1,204</td><td data-numeric>1,310</td></tr>
      <tr><th scope="row">South</th><td data-numeric>987</td><td data-numeric>1,045</td></tr>
    </tbody>
    <tfoot><tr><th scope="row">Total</th><td data-numeric>2,191</td><td data-numeric>2,355</td></tr></tfoot>
  </table>
</tk-table>

Анатомия

Часть Что это
tk-table контейнер с рамкой и скруглёнными углами
слот по умолчанию ваша <table> с <caption>, <thead>, <tbody> и <tfoot>
<caption> полоса заголовка; называет таблицу
<thead> строка шапки, средним начертанием второстепенного цвета
<th scope="row"> заголовок строки, средним начертанием
<tfoot> строка итогов, полужирным
part scroll контейнер прокрутки вокруг таблицы

Плотность

Open incidents
ServiceStatus
PaymentsInvestigating
SearchResolved
 
<tk-table density="compact">
  <table>
    <caption>Open incidents</caption>
    <thead><tr><th scope="col">Service</th><th scope="col">Status</th></tr></thead>
    <tbody><tr><td>Payments</td><td>Investigating</td></tr><tr><td>Search</td><td>Resolved</td></tr></tbody>
  </table>
</tk-table>
density Отступы ячейки
comfortable (по умолчанию) space-12 × space-16
compact space-8 × space-12

Настройки

Team members
NameRole
Alice ChenDesign
Bo NguyenEngineering
Carla DiazResearch
 
<tk-table zebra hover header-fill>
  <table>
    <caption>Team members</caption>
    <thead><tr><th scope="col">Name</th><th scope="col">Role</th></tr></thead>
    <tbody><tr><td>Alice Chen</td><td>Design</td></tr><tr><td>Bo Nguyen</td><td>Engineering</td></tr><tr><td>Carla Diaz</td><td>Research</td></tr></tbody>
  </table>
</tk-table>
  • zebra: закрашивает каждую вторую строку. Полезно в широких плотных таблицах.
  • hover: подсвечивает строку под курсором. Это может намекать, что строка кликабельна, поэтому включайте его, только когда он помогает не потерять строку.
  • header-fill: заливает шапку спокойным фоном. По умолчанию шапка без заливки.

Полосы и подсветка — украшение. Смысл несут заголовки и текст ячеек.

sticky оставляет шапку на виду при прокрутке таблицы. Для этого у part scroll должна быть максимальная высота.

<style>
  tk-table::part(scroll) { max-height: 320px; }
</style>
<tk-table sticky>
  <table>…</table>
</tk-table>

Класс

Класс tk-table оформляет таблицу без элемента. Он принимает те же настройки в виде атрибутов data-*, но области прокрутки у него нет: таблица шире контейнера обрезается. Если таблица может не поместиться, используйте <tk-table>.

Shortcuts
ActionKeys
SearchCtrl K
SaveCtrl S
 
<div class="tk-table" data-density="compact" data-zebra>
  <table>
    <caption>Shortcuts</caption>
    <thead><tr><th scope="col">Action</th><th scope="col">Keys</th></tr></thead>
    <tbody><tr><td>Search</td><td>Ctrl K</td></tr><tr><td>Save</td><td>Ctrl S</td></tr></tbody>
  </table>
</div>