DateFilter

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

Обзор

Основное назначение: фильтрация колонки таблицы по дате.
Ключевые возможности:
- Встроенный календарь (Flatpickr) с выбором даты или диапазона.
- Операторы: equals, notEquals, before, after, between, empty, notEmpty.
- Автоматическое переключение режима календаря (одиночная дата / диапазон) в зависимости от оператора.
- Форматированное отображение выбранной даты в кнопке-триггере.
- Адаптивный интерфейс через ResponsiveFilter.
- Специальные операторы empty/notEmpty без выбора даты.

API компонента

Props

Проп	Тип	По умолчанию	Описание
`column`	`Object`		Объект колонки TanStack Table. Должен содержать `getFilterValue()` и `setFilterValue()`.
`title`	`String`		Заголовок фильтра (отображается в кнопке и панели).
`config`	`Object`	`{}`	Дополнительная конфигурация для DatePicker (опции Flatpickr).

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

<script>
    <DateFilter
        v-if="table.getColumn('created_at')"
        :column="table.getColumn('created_at')"
        title="Order Date Range"
        :config="{ maxDate: new Date(), mode: 'range' }"
    />
</script>

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

<script>
    columnHelper.accessor(row => Number(row.created_at), {
        id: 'created_at',
        header: 'Date',
        cell: (info) => dayjs(info.getValue()).format('DD MMM YYYY'),
        filterFn: (row, columnId, filterValue) => {
            if (!filterValue) return true;
            const { op, from, to } = filterValue;
            const cell = row.getValue(columnId);
        
            if (op === 'empty')    return !cell;
            if (op === 'notEmpty') return !!cell;
            if (!cell)             return false;
        
            const cellDay  = dayjs(cell).startOf('day').valueOf();
            const fromDay  = from ? dayjs(from).startOf('day').valueOf() : null;
            const toDay    = to   ? dayjs(to).startOf('day').valueOf()   : null;
        
            switch (op) {
                case 'equals':    return cellDay === fromDay;
                case 'notEquals': return cellDay !== fromDay;
                case 'before':    return cellDay < fromDay;
                case 'after':     return cellDay > fromDay;
                case 'between':   return cellDay >= fromDay && cellDay <= toDay;
                default:          return true;
            }
        },
    }),
</script>