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).

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:

<script lang="ts">
  let pending = $state('')
  let applied = $state('')
  const filtered = $derived(
    applied ? rows.filter((r) => r.name.toLowerCase().includes(applied.toLowerCase())) : rows,
  )
  function commit() { applied = pending }
</script>

<input bind:value={pending} onkeydown={(e) => e.key === 'Enter' && commit()} />
<button onclick={commit}>Apply</button>

<SvGrid
  data={filtered}
  columns={columns}
  features={features}
  filterMode="none"
  externalFilter={true}
/>

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 for the canonical implementation with debounce + abort.

Apply once, then freeze

To take a snapshot:

const filteredData = api.getData().filter(myPredicate)
// pass filteredData into a separate <SvGrid> 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.

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.

See also

• Applying filters - server-side variant
• Filter API