Data Table 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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
label
string required Human-readable option text.
value
string required Value stored in the column filter array.
icon
Component undefined Optional Svelte icon component.