Компонент ColumnFilter предоставляет интерфейс фильтрации для колонок таблицы. Поддерживает четыре типа фильтров: текстовый, числовой, выбор из списка и диапазон дат. Каждый тип фильтра включает выбор оператора сравнения.
- Основное назначение: фильтрация данных в колонке таблицы TanStack Table.
- Ключевые возможности:
- Четыре типа фильтров:
text, numberRange, select, dateRange. - Выбор оператора сравнения через
FilterOperatorDropdown. - Автоматическое определение типа фильтра из метаданных колонки.
- Кнопка очистки фильтра.
- Сохранение фильтра в формате
{ op, value }.
| Проп | Тип | По умолчанию | Описание |
|---|
column | Object | (обязательный) | Объект колонки TanStack Table. Должен содержать getFilterValue(), setFilterValue() и columnDef.meta. |
| Поле | Тип | Описание |
|---|
filter | String | Тип фильтра. Возможные значения: 'text' (по умолчанию), 'numberRange', 'select', 'dateRange'. |
options | Array | Массив опций для типа select. Каждый элемент: { label, value, icon? }. |
<template>
<div>
<div class="flex justify-end mb-4">
<TableColumnVisibility :table="table" />
</div>
<Table>
<thead>
<tr>
<th v-for="header in table.getFlatHeaders()" :key="header.id">
{{ header.column.columnDef.header }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="row in table.getRowModel().rows" :key="row.id">
<td v-for="cell in row.getVisibleCells()" :key="cell.id">
{{ cell.getValue() }}
</td>
</tr>
</tbody>
</Table>
</div>
</template>
<script>
import { useVueTable, getCoreRowModel } from '@tanstack/vue-table';
export default {
setup() {
const table = useVueTable({
data: [...],
columns: [...],
getCoreRowModel: getCoreRowModel(),
});
return { table };
},
};
</script>
