bp/app/Views/components/table/table_header.twig

51 lines
2.7 KiB
Twig

{#
table_header.twig - Переиспользуемый шаблон заголовка таблицы
Параметры:
- columns: Ассоциативный массив столбцов ['name' => ['label' => 'Name', 'width' => '40%']]
- sort: Текущий столбец сортировки
- order: Направление сортировки (asc/desc)
- filters: Текущие значения фильтров
#}
<thead class="table-light">
<tr>
{% for columnKey, column in columns %}
<th style="width: {{ column.width|default('auto') }};"
class="{{ column.align|default('') }}"
data-sort-column="{{ columnKey }}">
<div class="header-content">
{# Поле поиска - первым, для правильного позиционирования #}
{# Иконка поиска #}
<i class="fa-solid fa-search search-trigger text-muted"
data-search-trigger="{{ columnKey }}"
title="{{ column.searchTitle|default('Поиск по ' ~ column.label|lower) }}"></i>
<input type="text"
class="form-control-sm header-search-input"
data-search-input="{{ columnKey }}"
value="{{ filters[columnKey]|default('') }}"
placeholder="{{ column.placeholder|default('Поиск...') }}"
style="display: none;">
{# Текст заголовка #}
<span class="header-text" data-header-text="{{ columnKey }}">
{{ column.label }}
</span>
{# Иконка сортировки #}
<i class="fa-solid fa-sort sort-icon {{ sort == columnKey ? 'active' : 'text-muted' }}"
data-sort="{{ columnKey }}"
title="{{ sort == columnKey ? (order == 'asc' ? 'Сортировка по возрастанию (нажмите для сортировки по убыванию)' : 'Сортировка по убыванию (нажмите для сортировки по возрастанию)') : 'Сортировка' }}"></i>
</div>
</th>
{% endfor %}
{# Колонка действий (опционально) #}
{% if actions is defined and actions %}
<th class="text-end {{ actions.class|default('') }}" style="width: {{ actions.width|default('auto') }};">
{{ actions.label|default('Действия') }}
</th>
{% endif %}
</tr>
</thead>