# Custom column filters
When the built-in operators and the set-filter pattern are not enough,
give the column its own filter, or take over the filter pipeline.
> Live demo: Excel-style filters - https://svgrid.com/demos/03-excel-filters/
## Your own filter control: `customFilter`
A column's `customFilter` replaces the operator condition with your own
model and control: a range slider that holds `[min, max]`, a tag picker that
holds `string[]`, a "last N days" widget that holds a number.
- `predicate(model)` returns the row test. It runs once per filter change,
so parse dates or build a `Set` there, not inside the returned function.
The test gets the column's value and the row's data.
- `menu` is a snippet for the filter menu and the tool panel's Filters tab.
`floating` is one for the floating filter row. Each falls back to the
other, so one snippet can serve all three.
- The snippet receives `{ column, model, setModel, surface, values, close }`.
`setModel(null)` clears the filter. `values()` returns the column's
distinct values under the other columns' filters, the same list the Values
checklist shows.
```svelte
{#snippet amountRange(f: CustomFilterContext)}
{@const max = f.model?.[1] ?? 40000}
{/snippet}
```
The model is ANDed with the column's operator condition and its Values
checklist, and is part of the rest of the filter state:
- `api.setCustomFilter(columnId, model)` sets it, `null` clears it, and
`api.getCustomFilter(columnId)` reads it. `api.clearFilter` and
`api.clearAllFilters` clear it with everything else.
- `api.getState()` returns `customFilters` while any model is set, and
`api.setState({ customFilters })` restores them. Keep the model
JSON-serializable if you save views.
- `onFiltersChange` reports active models under `custom`, keyed by column id.
With `externalFilter` the grid only records the model, so a server
translates it into its query; `createServerDataSource` forwards it as
`filterModel.custom`.
- An inactive model filters nothing and does not light the funnel. By
default `null`, `undefined`, `''` and `[]` are inactive; pass
`isActive(model)` for anything else.
- `showValues: false` drops the Values checklist from the menu when it adds
nothing, as for a slider over thousands of distinct prices.
A `customFilter` with only `predicate` keeps the built-in UI; the model is
then set only through the API.
## Option A - supply a `filterFn`
The simplest extension: register your own filter function and reference it
per column.
```ts
// types
declare module '@svgrid/grid' {
interface FilterFnsRegistry {
inListCSV: (value: unknown, query: string) => boolean
}
}
// register
import { filterFns } from '@svgrid/grid'
;(filterFns as any).inListCSV = (value: unknown, query: string) => {
const items = String(query).split(',').map((s) => s.trim().toLowerCase())
return items.includes(String(value ?? '').toLowerCase())
}
// use
const columnFilters = [{ id: 'status', value: 'active,pending', fn: 'inListCSV' }]
```
`filterFns` is a plain object so monkey-patching works - but the
`FilterFnsRegistry` module augmentation is what tells TypeScript about the
new key.
## Option B - control the entire filter pipeline
Pass `externalFilter={true}` and feed the grid a pre-filtered array. The
grid still records the in-UI filter state (so the menu and chips light
up correctly) but does **not** filter rows itself - you do, in response
to the `onFiltersChange` callback. This is the path server-side data
sources, large remote datasets, and tree data take.
```svelte
(filters = next.columns)}
/>
```
The same pattern exists for sort (`externalSort` + `onSortingChange`)
and works on the same grid - see the [server-side demo](https://svgrid.com/demos/09-server-side/).
If you only want a single pre-filtered array and don't need the grid's
filter UI at all, pass `filterMode="none"` instead and skip the
callbacks entirely.
## Option C - custom column UI
Render a custom header (via `header: () => renderSnippet(...)`) that
includes your own filter widget. Update controlled state from the widget;
the grid will react. See [Custom header components](https://svgrid.com/docs/help/columns/custom-header-components/).
## A control that lives outside the grid
When the filter control sits outside the grid, narrowing the array is the
shortest path: filter it, hand the result to `data`. Everything downstream -
sort, selection, the row count - follows the filtered set. For a control in
the grid's own filter surfaces, use `customFilter` above.
```svelte
```
## Combining with the built-in filters
Your predicate and the column filters compose without knowing about each
other: yours narrows `data`, the grid narrows what it renders. Order does not
matter because both are pure.
```svelte
```
## See also
- [Filter API](https://svgrid.com/docs/help/filtering/filter-api/)
- [Set filter](https://svgrid.com/docs/help/filtering/set-filter/)
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/filtering/custom-column-filters/ . All docs: https://svgrid.com/llms.txt