FilterSelector

Компонент FilterSelector — это адаптивный выпадающий список для управления набором отображаемых фильтров в тулбаре таблицы. Позволяет добавлять и удалять фильтры, а также полностью очищать выбранный набор.

Обзор

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

API компонента

Props

Проп	Тип	По умолчанию	Описание
`table`	`Object`		Экземпляр таблицы TanStack Table. Должен содержать `options.meta.getToolbarFilters()` и `options.meta.setToolbarFilters()`.
`options`	`Array`	`[]`	Массив доступных для выбора фильтров.

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

<FilterSelector :table="table" :options="filterOptions" />

<script>
    data() {
        return {
            filterOptions: [
                { label: 'Level',    value: 'level' },
                { label: 'Status',   value: 'status' },
                { label: 'Duration', value: 'duration' },
                { label: 'Price',    value: 'price' },
                { label: 'Rating',   value: 'rating' },
                { label: 'Earning',  value: 'earning' },
                { label: 'Students', value: 'students' },
            ],
            toolbarFilters: ['level', 'status'], // Начальные фильтры
        };
    }
</script>

Настройка meta в таблице

<script>
    const table = useVueTable({
        meta: {
            setToolbarFilters: (filters) => { self.toolbarFilters = filters },
            getToolbarFilters: () => self.toolbarFilters,
        },
    });
</script>