bukatchuk ui

Элементы

Таблица

Настоящая таблица в обёртке с прокруткой: заголовки над столбцами, столбец действий, журнал.

table с версии 0.1.0

Примеры

Пользователи
ПользовательE-mailСоздан
Иванов Пётр
ivanov		 ivanov@example.ru 12/09/2026 10:30 Изменить
Смирнова Анна
smirnova		 smirnova@example.ru 03/10/2026 16:05 Изменить 
<div class="table-wrap">
  <table class="table">
    <thead><tr><th>Пользователь</th><th>E-mail</th><th>Создан</th><th></th></tr></thead>
    <tbody>
      <tr>
        <td>Иванов Пётр<br><small>ivanov</small></td>
        <td>ivanov@example.ru</td>
        <td class="table__nowrap">12/09/2026 10:30</td>
        <td class="table__actions"><a class="btn btn--sm btn--ghost" href="#">Изменить</a></td>
      </tr>
      <tr>
        <td>Смирнова Анна<br><small>smirnova</small></td>
        <td>smirnova@example.ru</td>
        <td class="table__nowrap">03/10/2026 16:05</td>
        <td class="table__actions"><a class="btn btn--sm btn--ghost" href="#">Изменить</a></td>
      </tr>
    </tbody>
  </table>
</div>
Журнал
ВремяСобытиеПодробности
13/10/2026 09:12loginВход с адреса 203.0.113.7
13/10/2026 09:40meeting.createСоздана встреча «Планёрка»
 
<div class="table-wrap">
  <table class="table table--log">
    <thead><tr><th>Время</th><th>Событие</th><th>Подробности</th></tr></thead>
    <tbody>
      <tr><td class="table__nowrap">13/10/2026 09:12</td><td><code>login</code></td><td>Вход с адреса 203.0.113.7</td></tr>
      <tr><td class="table__nowrap">13/10/2026 09:40</td><td><code>meeting.create</code></td><td>Создана встреча «Планёрка»</td></tr>
    </tbody>
  </table>
</div>

Установка

bukatchuk-ui add table

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

Файлы

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

Варианты

КлассНазначение
table--log

Макрос для Jinja

{#- Таблица в обёртке. heads — список заголовков; строки передаются блоком caller() как <tr>…</tr>. -#}
{% macro table(heads, log=False) -%}
<div class="table-wrap"><table class="table{% if log %} table--log{% endif %}">
  <thead><tr>{% for h in heads %}<th>{{ h }}</th>{% endfor %}</tr></thead>
  <tbody>{{ caller() }}</tbody>
</table></div>
{%- endmacro %}