RangeFilter

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

Обзор

Основное назначение: фильтрация числовых значений колонки таблицы по одному значению или диапазону.
Ключевые возможности:
- Операторы: equals, notEquals, gt, gte, lt, lte, between.
- Два поля ввода: Value/Min и Max (второе только для between).
- Кастомные иконки для кнопки-триггера и префиксов полей ввода.
- Динамический текст кнопки через функцию buttonText.
- Адаптивный интерфейс через ResponsiveFilter.
- Кнопка очистки фильтра.
- Автофокус на первое поле при открытии.

API компонента

Props

Проп	Тип	По умолчанию	Описание
`column`	`Object`		Объект колонки TanStack Table. Должен содержать `getFilterValue()` и `setFilterValue()`.
`title`	`String`		Заголовок фильтра (отображается в кнопке и панели).
`Icon`	`Object \| Function`		Компонент иконки для кнопки-триггера.
`MinPrefixIcon`	`Object \| Function`		Компонент иконки-префикса для поля Value/Min.
`MaxPrefixIcon`	`Object \| Function`		Компонент иконки-префикса для поля Max.
`buttonText`	`Function`	`({ min, max }) => ...`	Функция для формирования текста кнопки. Принимает объект `{ min, max }`.

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

<script>
    <RangeFilter
        :column="table.getColumn('total')"
        title="Total Amount"
        :button-text="({ min, max }) => 
            `${min ? 'From ' + min : ''}${min && max ? ' - ' : ''}${max ? 'To ' + max : ''}`
        "
    />
</script>

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

<script>
    columnHelper.accessor('total', {
        header: 'Total',
        filterFn: (row, columnId, filterValue) => {
            if (!filterValue) return true;
            const { op, min, max } = filterValue;
            const value = row.getValue(columnId);
            const minN = min !== '' && min !== undefined ? Number(min) : null;
            const maxN = max !== '' && max !== undefined ? Number(max) : null;
        
            switch (op) {
                case 'equals':    return minN !== null && value === minN;
                case 'notEquals': return minN !== null && value !== minN;
                case 'gt':        return minN !== null && value > minN;
                case 'gte':       return minN !== null && value >= minN;
                case 'lt':        return minN !== null && value < minN;
                case 'lte':       return minN !== null && value <= minN;
                case 'between':
                    if (minN !== null && value < minN) return false;
                    if (maxN !== null && value > maxN) return false;
                    return true;
                default:          
                    return true;
            }
        },
        cell: ({ getValue }) =>
            h('p', { 
              class: 'text-sm-plus font-medium text-gray-800 dark:text-dark-100' 
            }, `$${getValue().toFixed(1)}`),
    }),
</script>

Ячейка с форматированием суммы

<script>
    cell: ({ getValue }) =>
        h('p', { 
            class: 'text-sm-plus font-medium text-gray-800 dark:text-dark-100' 
        }, `$${getValue().toFixed(1)}`),
</script>