FacetedFilter

Компонент FacetedFilter — это адаптивный фильтр с фасетами (количеством записей) для колонок таблицы. Отображает выпадающий список с поиском, чекбоксами и счётчиками совпадений. На мобильных устройствах открывается как нижняя шторка, на десктопах — как выпадающая панель.

Обзор

Основное назначение: фильтрация колонки таблицы по одному или нескольким значениям с отображением частоты встречаемости.
Ключевые возможности:
- Поиск по списку опций.
- Множественный выбор значений с чекбоксами.
- Отображение количества записей для каждого значения (facets).
- Выбор оператора: equals, notEquals.
- Отображение выбранных значений в кнопке-триггере.
- Адаптивный интерфейс через ResponsiveFilter.
- Кнопка очистки фильтра.

API компонента

Props

Проп	Тип	По умолчанию	Описание
`column`	`Object`		Объект колонки TanStack Table. Должен содержать `getFilterValue()`, `setFilterValue()`, `getFacetedUniqueValues()`.
`title`	`String`		Заголовок фильтра (отображается в кнопке и плейсхолдере поиска).
`options`	`Array`	`[]`	Массив опций для фильтрации. Каждый элемент должен содержать поля, указанные в `labelField` и `valueField`.
`labelField`	`String`	`'label'`	Ключ поля с отображаемым текстом опции.
`valueField`	`String`	`'value'`	Ключ поля со значением опции.
`showCheckbox`	`Boolean`	`true`	Показывать чекбоксы рядом с опциями.

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

<FacetedFilter 
    :column="table.getColumn('order_status')" 
    title="Status" 
    :options="statusOptions" 
/>

Где `statusOptions` определён в `data()`

<script>
    data() {
        return {
            statusOptions: orderStatusOptions.map(s => ({ 
                label: s.label, 
                value: s.value 
            })),
        };
    }
</script>

Исходные данные статусов

<script>
    export const orderStatusOptions = [
        { label: 'Pending', value: 'pending', color: 'info' },
        { label: 'Processing', value: 'processing', color: 'warning' },
        { label: 'Shipped', value: 'shipped', color: 'success' },
        { label: 'Delivered', value: 'delivered', color: 'primary' },
        { label: 'Cancelled', value: 'cancelled', color: 'error' },
    ];
</script>

Функция фильтрации в колонке

<script>
    columnHelper.accessor('order_status', {
        header: 'Status',
        filterFn: (row, columnId, filterValue) => {
            if (!filterValue) return true;
            const { op, values } = filterValue;
            const cell = row.getValue(columnId);
            
            if (op === 'empty')    return !cell;
            if (op === 'notEmpty') return !!cell;
            if (!values?.length)   return true;
            
            switch (op) {
                case 'equals':    return values.includes(cell);
                case 'notEquals': return !values.includes(cell);
                default:          return values.includes(cell);
            }
        },
        cell: ({ getValue }) => {
            const status = orderStatusOptions.find(s => s.value === getValue());
            const cls = colorMap[status?.color] ?? 'bg-gray-100 text-gray-700';
            return h('span', { 
                class: `rounded-full px-2 py-1 text-xs font-medium ${cls}` 
            }, status?.label ?? getValue());
        },
    }),
</script>