Data Table Filters

A powerful data table filter component. Library-agnostic. Supports client and server-side filtering. Inspired from Bazza UI

date-fnsruned@lucide/svelte@internationalized/date

Title	Status	Estimate	Due date	Labels
Ship localized filter toolbar	In Progress	8h	Aug 4, 2026	DocsDesign
Backfill server-side status counts	Backlog	13h	Aug 12, 2026	APIOps
Document column builder patterns	Todo	5h	Aug 2, 2026	Docs
Finish billing audit filters	Done	3h	Jul 30, 2026	BillingOps
Tune tag filtering for onboarding	In Progress	11h	Aug 9, 2026	APIDesign

Installation

Install the registry block first. The package ships with the UI components, core column types, helper utilities, and locale files.

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

Original Docs

Visit the Bazza UI docs for a well-written guide.

Visit Docs

Concepts

Strategy

Use client for local rows or server when the backend owns filtering.

Column data types

column-data-type.ts

Filters

Applied filters live inside FiltersState.

filter-model.ts

Column options

column-option.ts

Column configuration

Use createColumnConfigHelper<TData>() to keep columns typed.

column-config-helper.ts

Instance

createFilters() creates the filter controller.

Component

DataTableFilter renders the visual filter UI.

Guides

Build in this order: types.ts, then columns.ts, then a filter controller module, and finally a .svelte component that renders the UI and applies the filters.

Suggested structure

file-structure

Reference scenario

We will use a small issue tracker model for the rest of the guide so each column example builds on the same row shape.

types.ts

Columns

The filter component needs its own column configuration because it does more than render cells. It needs a stable ID, a typed accessor, a display label, an icon, and enough metadata to decide how each filter should behave.

1. Start with the helper

Pass your row type into createColumnConfigHelper<TData>() once, then build every column from that helper.

columns.ts

2. Build each column in order

The safest order is: type -> id -> accessor -> displayName -> icon -> build().

title-column.ts

3. Use declared options for known values

For option and multiOption columns with a fixed set of values, pass options() directly on the builder.

status-column.ts

4. Use transformOptionFn() when values are richer than strings

If your accessor returns objects instead of string IDs, transform each distinct value into a ColumnOption.

assignee-column.ts

5. Add boundaries to number columns when you know them

min() and max() control the visual range for number filters. They are especially important when you use the server strategy.

estimate-column.ts

6. Export the final config as as const

This preserves literal column IDs and keeps the rest of the API fully typed.

columns.ts

Instance

createFilters() creates the controller. It gives you the resolved columns, the current filters state, the mutating actions, and the active strategy.

1. Create the controller

For local filtering, pass the current rows and your column config.

filters.svelte.ts

2. Seed initial filters with defaultFilters

Use this when the table should open with a predefined filter applied.

filters.svelte.ts

3. Pass remote options and faceted values for server mode

When the server owns filtering, send declared options and counts into the controller so the menus still know what to render.

server-filters.svelte.ts

State ownership

Current API

The Svelte controller owns its filters state. Use defaultFilters for initial state, or pass filters when you want to seed the controller at creation time. There is no onFiltersChange controlled mode exposed here.

Component

DataTableFilter renders the filter UI. Pair it with a derived list of rows for client-side filtering, or forward filterController.filters into your data-fetching layer for server-side filtering.

IssueTable.svelte

Title	Status	Estimate	Due date	Labels
Ship localized filter toolbar	In Progress	8h	Aug 4, 2026	DocsDesign
Backfill server-side status counts	Backlog	13h	Aug 12, 2026	APIOps
Document column builder patterns	Todo	5h	Aug 2, 2026	Docs
Finish billing audit filters	Done	3h	Jul 30, 2026	BillingOps
Tune tag filtering for onboarding	In Progress	11h	Aug 9, 2026	APIDesign

Internationalization

Pass a locale prop to switch the built-in text for search, operators, buttons, and placeholders.

locale.ts