TableSortIcon

Компонент TableSortIcon отображает иконку сортировки для заголовков таблицы. Показывает направление сортировки (по возрастанию, по убыванию) или нейтральное состояние.

Обзор

  • Основное назначение: индикатор направления сортировки в заголовках таблиц.
  • Ключевые возможности:
    • Три состояния: без сортировки, по возрастанию (asc), по убыванию (desc).
    • Визуальное различие активной и неактивной сортировки через цвет.
    • Адаптация под тёмную тему.

API компонента

Props

ПропТипПо умолчаниюОписание
sortedString | BooleanfalseНаправление сортировки. Возможные значения: 'asc' — по возрастанию, 'desc' — по убыванию, false — не отсортировано.

Базовое использование

<table>
    <thead>
        <tr>
            <th @click="sortBy('name')" class="cursor-pointer select-none">
                <div class="flex items-center gap-1">
                    Имя
                    <TableSortIcon :sorted="sortField === 'name' ? sortDirection : false" />
                </div>
            </th>
            <th @click="sortBy('date')" class="cursor-pointer select-none">
                <div class="flex items-center gap-1">
                    Дата
                    <TableSortIcon :sorted="sortField === 'date' ? sortDirection : false" />
                </div>
            </th>
        </tr>
    </thead>
    <!-- ... -->
</table>