18. Table: фильтрация

Подключение фильтрации

import {
  getFilteredRowModel,
  type ColumnFiltersState,
} from '@tanstack/react-table'

const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
const [globalFilter, setGlobalFilter] = useState('')

const table = useReactTable({
  data,
  columns,
  state: { columnFilters, globalFilter },
  onColumnFiltersChange: setColumnFilters,
  onGlobalFilterChange: setGlobalFilter,
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),  // Добавляем!
})

Глобальный фильтр

Поиск по всем колонкам одновременно:

<input
  value={globalFilter}
  onChange={(e) => setGlobalFilter(e.target.value)}
  placeholder="Поиск по всем колонкам..."
/>

Фильтр по колонке

// Для конкретной колонки
<input
  value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
  onChange={(e) => table.getColumn('name')?.setFilterValue(e.target.value)}
  placeholder="Фильтр по имени..."
/>

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

TanStack Table предоставляет встроенные функции фильтрации:

const columns: ColumnDef<User>[] = [
  {
    accessorKey: 'name',
    filterFn: 'includesString',    // default: содержит строку (case-insensitive)
  },
  {
    accessorKey: 'age',
    filterFn: 'inNumberRange',     // В диапазоне [min, max]
  },
  {
    accessorKey: 'role',
    filterFn: 'arrIncludes',       // Элемент входит в массив фильтра
  },
  {
    accessorKey: 'status',
    filterFn: 'equals',            // Точное совпадение
  },
]

Встроенные filterFn:

• includesString — содержит строку
• includesStringSensitive — то же, с учётом регистра
• equalsString — точное совпадение строк
• arrIncludes — значение входит в массив
• arrIncludesAll — все значения из массива присутствуют
• arrIncludesSome — хотя бы одно значение из массива присутствует
• equals — строгое равенство
• weakEquals — нестрогое равенство
• inNumberRange — число в диапазоне

Кастомный filterFn:

filterFn: (row, columnId, filterValue) => {
  const value = row.getValue(columnId)
  return value >= filterValue.min && value <= filterValue.max
}

Отключение фильтрации для колонки

{ accessorKey: 'id', enableColumnFilter: false }