Search docs

Search blocks and features…

Filtering

AND/OR filter groups over readable operators (is / is not / contains / greater than / between …), built into the toolbar's Filters popover.

Installation

Filtering ships with both table components — install whichever you're using.

Works with:Data Table
npx shadcn@latest add @kotsas-ui/data-table

Usage

Declare which columns are filterable and how — the type determines which operators are offered. Users build two-level AND/OR groups directly in the popover.

Set up CI pipeline
High
Done
$2,400.00
Design onboarding flow
Medium
In progress
$3,200.00
Migrate auth to OAuth2
Urgent
In progress
$5,600.00
Write API docs
Low
To do
$900.00
Fix pagination bug
High
Review
$600.00
Upgrade Next.js to 16
Medium
Done
$1,800.00

Examples

Pass initialFilterState to arrive pre-filtered — e.g. a saved view. Users can still edit or clear it from the popover.

// Arrive pre-filtered — e.g. a "High priority" saved view.
<DataTable
  data={tasks}
  columns={columns}
  filterableColumns={filterableColumns}
  initialFilterState={{
    combinator: "and",
    groups: [
      {
        id: "g1",
        combinator: "and",
        conditions: [
          { id: "c1", columnId: "priority", operator: "isAnyOf", value: ["high", "urgent"] },
        ],
      },
    ],
  }}
/>

API Reference

PropTypeDefaultDescription
filterableColumns?FilterDef[]—Which columns are filterable and how. Adds the toolbar's Filters popover when non-empty. Each id must match a column id AND a row property key.
initialFilterState?FilterState—AND/OR filter groups applied once at mount — conditions on unknown columns are stripped automatically.
FilterDef.type"text" | "number" | "select" | "date"—Decides which operators are offered: contains/starts-with for text, between/greater-than for numbers, is-any-of for selects, before/after/between for dates.
FilterDef.operators?FilterOperator[]per typeRestricts the operator list; falls back to the type's full default set.
FilterDef.options?{ label; value }[]—Required for type "select" — the choosable values.