RadioFilter

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

Обзор

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

API компонента

Props

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

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

<script>
    <RadioFilter 
        :column="table.getColumn('duration')" 
        title="Duration" 
        :options="durationOptions" 
    />
</script>

Опции фильтра

<script>
    durationOptions: [
        { label: 'Less 1 Hours',       value: 'lt1' },
        { label: '1 to 3 Hours',       value: '1to3' },
        { label: '3 to 6 Hours',       value: '3to6' },
        { label: '6 to 10 Hours',      value: '6to10' },
        { label: 'More than 10 Hours', value: 'gt10' },
    ]
</script>

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

<script>
    columnHelper.accessor('duration', {
        header: 'Duration',
        isHiddenColumn: true,
        filterFn: (row, columnId, filterValue) => {
            if (!filterValue) return true;
            const { op, value } = filterValue;
            if (!value) return true;
        
            const hours = row.getValue(columnId) / 1000 / 3600;
        
            const inRange = (v) => {
                switch (v) {
                    case 'lt1':   return hours < 1;
                    case '1to3':  return hours >= 1 && hours < 3;
                    case '3to6':  return hours >= 3 && hours < 6;
                    case '6to10': return hours >= 6 && hours < 10;
                    case 'gt10':  return hours >= 10;
                    default:      return true;
                }
            };
        
            return op === 'notEquals' ? !inRange(value) : inRange(value);
        },
    }),
</script>