Data filters & toolbar

6 min · Pattern

Data tables need a toolbar above the rows — search, view switcher, date range, and active filter chips. Compose these with Row, SegmentedControl, and Input.

What this pattern covers

A data table is more than columns and rows. Production tables almost always need:

A heading or selection count on the left
Search input on the right
SegmentedControl to switch views (All / Active / Archived)
DateRangePicker for time-bounded data
Active filter Tags the user can dismiss

Gold reference: packages/core/ai/examples/blocks/Table1.tsx and eval task #9 in packages/core/ai/eval-tasks.md.

The toolbar is a Row with horizontal="between" and responsive stacking:

<Row
  fillWidth
  horizontal="between"
  vertical="center"
  paddingY="12"
  paddingX="24"
  gap="16"
  s={{ direction: "column", horizontal: "start" }}
>
  <Text variant="label-default-m">Transactions</Text>
  <Row gap="12" vertical="center">
    {/* filters go here */}
  </Row>
</Row>

On mobile (s={{ direction: "column" }}), stack the heading above the filter controls.

Search input

Table search uses Input with a search icon prefix and optional clear suffix:

<Input
  height="s"
  id="search"
  placeholder="Search..."
  value={search}
  hasPrefix={<Icon name="search" size="s" onBackground="neutral-weak" />}
  hasSuffix={
    search.length > 0 && (
      <IconButton
        tooltip="Clear"
        icon="close"
        size="s"
        variant="ghost"
        onClick={() => setSearch("")}
      />
    )
  }
/>

Wire value and onChange to local state. Reset pagination to page 1 when the query changes.

View switcher with SegmentedControl

Use SegmentedControl for mutually exclusive views:

const views = [
  { value: "all", label: "All" },
  { value: "active", label: "Active" },
  { value: "archived", label: "Archived" },
];

<SegmentedControl
  buttons={views}
  selected={view}
  onToggle={(value) => setView(value)}
/>

Controlled mode: own selected state and update it in onToggle. This same pattern appears on pricing pages for monthly/yearly billing toggles.

Date range filter

DateRangePicker sits in the toolbar for time-bounded tables. Pass value (a { from, to } range object) and onChange to update filter state. For compact toolbars, wrap DateRangePicker in a — it renders as an Input that opens the picker in a dropdown.

6 min · Pattern

Data tables need a toolbar above the rows — search, view switcher, date range, and active filter chips. Compose these with Row, SegmentedControl, and Input.

What this pattern covers

A data table is more than columns and rows. Production tables almost always need:

A heading or selection count on the left
Search input on the right
SegmentedControl to switch views (All / Active / Archived)
DateRangePicker for time-bounded data
Active filter Tags the user can dismiss

Gold reference: packages/core/ai/examples/blocks/Table1.tsx and eval task #9 in packages/core/ai/eval-tasks.md.

The toolbar is a Row with horizontal="between" and responsive stacking:

<Row
  fillWidth
  horizontal="between"
  vertical="center"
  paddingY="12"
  paddingX="24"
  gap="16"
  s={{ direction: "column", horizontal: "start" }}
>
  <Text variant="label-default-m">Transactions</Text>
  <Row gap="12" vertical="center">
    {/* filters go here */}
  </Row>
</Row>

On mobile (s={{ direction: "column" }}), stack the heading above the filter controls.

Search input

Table search uses Input with a search icon prefix and optional clear suffix:

<Input
  height="s"
  id="search"
  placeholder="Search..."
  value={search}
  hasPrefix={<Icon name="search" size="s" onBackground="neutral-weak" />}
  hasSuffix={
    search.length > 0 && (
      <IconButton
        tooltip="Clear"
        icon="close"
        size="s"
        variant="ghost"
        onClick={() => setSearch("")}
      />
    )
  }
/>

Wire value and onChange to local state. Reset pagination to page 1 when the query changes.

View switcher with SegmentedControl

Use SegmentedControl for mutually exclusive views:

const views = [
  { value: "all", label: "All" },
  { value: "active", label: "Active" },
  { value: "archived", label: "Archived" },
];

<SegmentedControl
  buttons={views}
  selected={view}
  onToggle={(value) => setView(value)}
/>

Controlled mode: own selected state and update it in onToggle. This same pattern appears on pricing pages for monthly/yearly billing toggles.

Date range filter

<Row gap="8" wrap paddingX="24" paddingBottom="12">
  <Tag variant="neutral" prefixIcon="calendar">
    Last 30 days
  </Tag>
  <Tag variant="neutral" prefixIcon="filter">
    Status: Active
  </Tag>
</Row>

✅ Once UI way	❌ Common mistake
SegmentedControl for view tabs	Custom button group with manual active styles
Input `height="s"` in toolbar	Full-size Input breaking toolbar height
`useMemo` for derived rows	Filtering inside render without memoization
Tag chips for active filters	No indication of applied filters
Reset page on filter change	Stale page 5 with 0 results

What this pattern covers

Search input

View switcher with SegmentedControl

Date range filter

What this pattern covers

Search input

View switcher with SegmentedControl

Date range filter

Active filter chips

Wiring filters to data

Selection count

Write this / not this

Check yourself

Data filters & toolbar

What this pattern covers

Toolbar anatomy

Search input

View switcher with SegmentedControl

Date range filter

What this pattern covers

Toolbar anatomy

Search input

View switcher with SegmentedControl

Date range filter

Active filter chips

Wiring filters to data

Selection count

Write this / not this

Check yourself

Related