FilterBar

FilterBar(props): Element

Defined in: packages/ui/src/components/filter-bar.tsx:32

URL-synced filter controls for data tables and list views.

Each filter serializes its state to URL search params (e.g., ?published=true). On filter change, React Router navigates with the updated params, resetting pagination to page 1. In the loader, @cfast/pagination’s parseParams() reads these params and applies them as Drizzle where clauses.

Supports text, select, boolean, and other filter types via FilterDef. An optional searchable prop adds a full-text search input across specified columns.

Parameters

props

FilterBarProps

See FilterBarProps.

Returns

Element

Example

<FilterBar
  filters={[
    { column: "published", type: "select", options: [
      { label: "Published", value: "true" },
      { label: "Draft", value: "false" },
    ]},
    { column: "createdAt", type: "dateRange" },
  ]}
  searchable={["title", "content"]}
/>