Faceted Filter

A searchable multi-select filter with live facet counts for categorical table columns.

Selections inside one filter use OR matching. Separate column filters are combined by the table, so Status = Active or Pending can be combined with Department = Engineering.

400 results

Name	Department	Status
Tim Wall	Operations	Inactive
Yukihiro Moolenaar	Operations	Pending
Larry Hejlsberg	Sales	Active
Edsger Hamilton	Operations	Inactive
Guido Eich	Support	Pending
Joe Cox	Engineering	Inactive
Lisa Moolenaar	Engineering	Inactive
Alan Matsumoto	Sales	Active

Installation

pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/r/data-table-faceted-filter.json

Table setup

Enable column filtering and faceting, provide their row models, and use filterFn_arrHas so a scalar column matches any selected option.

table.svelte.ts

Usage

Pass a filterable column and the complete option list. The component reads live counts from getFacetedUniqueValues() and stores selected values as a string array.

toolbar.svelte

Examples

Counts are shown by default. Pass showCounts={false} to hide both the option counts and selected result total.

With counts

Without counts

Server-provided counts

For server-side filtering, pass the backend facet map through facets. It overrides counts from the column while the selection API remains unchanged.

server-counts.svelte

Accessibility

The popover and command list provide focus management, option search, arrow-key navigation, selection, Escape handling, and focus restoration. The trigger announces the active selection count.

Props

Data table faceted filter props

Name	Type	Default	Description
`column`	`DataTableFacetedFilterColumn`	`required`	`A TanStack-compatible column exposing filter values and optional faceted counts.`
`title`	`string`	`required`	`Filter label displayed in the trigger.`
`options`	`DataTableFacetedFilterOption[]`	`required`	`Selectable labels and values, with optional icons.`
`facets`	`Map<string, number>`	`column counts`	`Optional count override, useful when counts come from a server.`
`searchPlaceholder`	`string`	`"Search {title}..."`	`Placeholder for the option search input.`
`emptyText`	`string`	`"No results found."`	`Message displayed when option search has no matches.`
`clearText`	`string`	`"Clear filters"`	`Label for the clear action.`
`showCounts`	`boolean`	`true`	`Shows option counts and the selected result total when facet data exists.`
`disabled`	`boolean`	`false`	`Disables the filter trigger.`
`open`	`boolean`	`false`	`Bindable popover open state.`
`class`	`string`	`undefined`	`Classes applied to the trigger button.`
`contentClass`	`string`	`undefined`	`Classes applied to the popover content.`

DataTableFacetedFilterOption

Name	Type	Default	Description
`label`	`string`	`required`	`Human-readable option text.`
`value`	`string`	`required`	`Value stored in the column filter array.`
`icon`	`Component`	`undefined`	`Optional Svelte icon component.`