# Applying filters
"Applying" a filter means running it against the data. SvGrid applies
filters **eagerly** by default: every keystroke updates the row model and
the visible rows (with a 150ms debounce inside the column menu's value
input).
> Live demo: Sort, filter, paginate - https://svgrid.com/demos/02-sort-filter-paginate/
## Apply on Enter (manual)
If you want the classic "apply"-button pattern (no filter runs until the
user confirms), run in `externalFilter` mode and only push a new
pre-filtered `data` array on commit:
```svelte
e.key === 'Enter' && commit()} />
```
The grid's own column-menu filter applies as the user types - there is
no built-in "Apply" button. Use the pattern above when you need explicit
commit semantics.
## Apply against the server
When data is server-side, filtering happens on the backend. Mirror the
state pattern but issue a request from the change handler. See
[demos/09-server-side.svelte](https://svgrid.com/demos/09-server-side/)
for the canonical implementation with debounce + abort.
## Apply once, then freeze
To take a snapshot:
```ts
const filteredData = api.getData().filter(myPredicate)
// pass filteredData into a separate with filterMode="none"
```
This works when you want to render the filtered result inside an
export-friendly grid that's independent of the user's current filters.
## More examples
### Top N / Bottom N filter
BI-style "show me top 10 by revenue" toolbar: pick a metric, pick N, top vs bottom. Live KPI strip shows revenue coverage of the slice.
> Live demo: Top N / Bottom N filter - https://svgrid.com/demos/99-top-n-filter/
### Product filter bar
A faceted filter/search bar from SvGrid UI: SvComboBox (search), SvButtonGroup (category), SvTagsInput (tags), SvSlider (price range), SvSwitchButton (in stock) and SvDropDownList (sort) - filtering a live product list as you go.
> Live demo: Product filter bar - https://svgrid.com/demos/336-filter-bar/
## See also
- [Applying filters - server-side variant](https://svgrid.com/docs/getting-started/#11-server-side-data)
- [Filter API](https://svgrid.com/docs/help/filtering/filter-api/)
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/filtering/applying-filters/ . All docs: https://svgrid.com/llms.txt