Элементы

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

Надстройка над таблицей: сортировка по заголовку (текст, числа, даты дд/мм/гггг), поиск, выбор строк с «выбрать все» и счётчиком, постраничный вывод на клиенте, пустое состояние.

data-table с версии 0.1.0 со скриптом

Примеры

Сортировка, поиск и страницы

Встреча	Начало	Участников	Статус
Ретроспектива релиза 2.14	13/10/2026 15:00	148	Идёт
Планирование дежурств	14/10/2026 11:00	24	Назначена
Разбор инцидента	15/10/2026 10:00	36	Назначена
Обзор метрик	16/10/2026 16:00	52	Назначена
Приёмка релиза 2.15	17/10/2026 12:00	1 020	Назначена
Ночное окно обслуживания	18/10/2026 03:00	8	Назначена
Ретроспектива релиза 2.13	30/09/2026 15:00	131	Прошла
Планирование квартала	25/09/2026 10:00	1 200	Прошла
Разбор нагрузки	20/09/2026 14:30	47	Прошла
Приёмка релиза 2.14	10/09/2026 12:00	95	Прошла

<div class="data-table">
  <div class="table-wrap">
    <table class="table" data-ui-table data-ui-filter="Поиск по встречам" data-ui-page-size="5" data-ui-empty="Встречи не найдены">
      <thead><tr><th data-ui-sort="text">Встреча</th><th data-ui-sort="date">Начало</th><th data-ui-sort="number">Участников</th><th>Статус</th></tr></thead>
      <tbody>
        <tr><td>Ретроспектива релиза 2.14</td><td class="table__nowrap">13/10/2026 15:00</td><td>148</td><td>Идёт</td></tr>
        <tr><td>Планирование дежурств</td><td class="table__nowrap">14/10/2026 11:00</td><td>24</td><td>Назначена</td></tr>
        <tr><td>Разбор инцидента</td><td class="table__nowrap">15/10/2026 10:00</td><td>36</td><td>Назначена</td></tr>
        <tr><td>Обзор метрик</td><td class="table__nowrap">16/10/2026 16:00</td><td>52</td><td>Назначена</td></tr>
        <tr><td>Приёмка релиза 2.15</td><td class="table__nowrap">17/10/2026 12:00</td><td>1 020</td><td>Назначена</td></tr>
        <tr><td>Ночное окно обслуживания</td><td class="table__nowrap">18/10/2026 03:00</td><td>8</td><td>Назначена</td></tr>
        <tr><td>Ретроспектива релиза 2.13</td><td class="table__nowrap">30/09/2026 15:00</td><td>131</td><td>Прошла</td></tr>
        <tr><td>Планирование квартала</td><td class="table__nowrap">25/09/2026 10:00</td><td>1 200</td><td>Прошла</td></tr>
        <tr><td>Разбор нагрузки</td><td class="table__nowrap">20/09/2026 14:30</td><td>47</td><td>Прошла</td></tr>
        <tr><td>Приёмка релиза 2.14</td><td class="table__nowrap">10/09/2026 12:00</td><td>95</td><td>Прошла</td></tr>
      </tbody>
    </table>
  </div>
</div>

Выбор строк

Встреча	Начало	Участников	Статус
Ретроспектива релиза 2.14	13/10/2026 15:00	148	Идёт
Планирование дежурств	14/10/2026 11:00	24	Назначена
Разбор инцидента	15/10/2026 10:00	36	Назначена
Обзор метрик	16/10/2026 16:00	52	Назначена
Приёмка релиза 2.15	17/10/2026 12:00	1 020	Назначена

<div class="data-table">
  <div class="table-wrap">
    <table class="table" data-ui-table data-ui-select data-ui-filter="Поиск по встречам">
      <thead><tr><th data-ui-sort="text">Встреча</th><th data-ui-sort="date">Начало</th><th data-ui-sort="number">Участников</th><th>Статус</th></tr></thead>
      <tbody>
        <tr><td>Ретроспектива релиза 2.14</td><td class="table__nowrap">13/10/2026 15:00</td><td>148</td><td>Идёт</td></tr>
        <tr><td>Планирование дежурств</td><td class="table__nowrap">14/10/2026 11:00</td><td>24</td><td>Назначена</td></tr>
        <tr><td>Разбор инцидента</td><td class="table__nowrap">15/10/2026 10:00</td><td>36</td><td>Назначена</td></tr>
        <tr><td>Обзор метрик</td><td class="table__nowrap">16/10/2026 16:00</td><td>52</td><td>Назначена</td></tr>
        <tr><td>Приёмка релиза 2.15</td><td class="table__nowrap">17/10/2026 12:00</td><td>1 020</td><td>Назначена</td></tr>
      </tbody>
    </table>
  </div>
</div>

Только сортировка

Встреча	Начало	Участников	Статус
Ретроспектива релиза 2.14	13/10/2026 15:00	148	Идёт
Планирование дежурств	14/10/2026 11:00	24	Назначена
Разбор инцидента	15/10/2026 10:00	36	Назначена
Обзор метрик	16/10/2026 16:00	52	Назначена

<div class="data-table">
  <div class="table-wrap">
    <table class="table" data-ui-table >
      <thead><tr><th data-ui-sort="text">Встреча</th><th data-ui-sort="date">Начало</th><th data-ui-sort="number">Участников</th><th>Статус</th></tr></thead>
      <tbody>
        <tr><td>Ретроспектива релиза 2.14</td><td class="table__nowrap">13/10/2026 15:00</td><td>148</td><td>Идёт</td></tr>
        <tr><td>Планирование дежурств</td><td class="table__nowrap">14/10/2026 11:00</td><td>24</td><td>Назначена</td></tr>
        <tr><td>Разбор инцидента</td><td class="table__nowrap">15/10/2026 10:00</td><td>36</td><td>Назначена</td></tr>
        <tr><td>Обзор метрик</td><td class="table__nowrap">16/10/2026 16:00</td><td>52</td><td>Назначена</td></tr>
      </tbody>
    </table>
  </div>
</div>

Установка

bukatchuk-ui add data-table

Вместе с компонентом установятся: tokens, fonts, base, core, button, table.

Файлы

Файл	Назначение
`data-table.css`	стили
`data-table.js`	скрипт
`example.html`	образец разметки, в проект не копируется

Клавиши

Клавиша	Действие
`Tab`	переход к заголовкам-кнопкам, поиску, флажкам и страницам
`Enter, Space`	сортировка по столбцу, отметка флажка, переход на страницу