Skip to content
quartiledocsv0.1
GitHub

FilterBar

PreviewPublishes selection

A row of filter chips that mirrors the selection: one chip per field, plus one for anything another view published.

Example

Filters3,295 orders · $429.8K

Revenue by channel, 4 items. Highest Organic search at $137,363.18; lowest Direct at $60,229.34.

Revenue by channel
ChannelRevenue
Organic search$137,363.18
Paid social$132,075.60
Email$100,173.80
Direct$60,229.34
const revenue = (rows) => rows.reduce((sum, r) => sum + r.amount, 0);
const usdK = (n) => `$${(n / 1000).toFixed(1)}K`;

<Selection>
  <FilterBar
    data={orders}
    fields={[
      { field: 'region', label: 'Region' },
      { field: 'channel', label: 'Channel' },
      { field: 'category', label: 'Category', pinned: false },
    ]}
    summary={(rows) => `${rows.length.toLocaleString('en-US')} orders · ${usdK(revenue(rows))}`}
  />
  <BarList data={orders} category="channel" value="amount" select />
</Selection>

Usage

Each field gets a chip whose menu lists the field's distinct values with a row count, or the options you pass. Choosing values publishes an in predicate; × clears the field. Pinned chips always show; unpinned fields are offered under Add filter.

Predicates published by other views (a brush, a clicked bar) appear as chips too, so a reader can see and clear every filter in one place. Click a channel in the list above to try it. summary receives the rows that pass every predicate.

Props

FilterBar

PropTypeDefaultDescription
fieldsrequiredFilterField[]——
dataDataInput<R>—Rows used for the summary and for options derived from distinct values.
selectionstring—Selection id. Defaults to the nearest <Selection>.
summary(rows: R[]) => ReactNode—Right-side summary of the rows that pass every predicate, e.g. "2,104 orders · $187.4K".
labelReactNode'Filters'Leading label. Defaults to "Filters".
idstring—Publisher id for predicates set from chip menus.
classNamestring——
styleCSSProperties——
aria-labelstring——

FilterField

PropTypeDefaultDescription
fieldrequiredstring——
labelstring—Chip label. Defaults to the field's schema label.
optionsFilterOption[]—Values offered in the chip's menu. When omitted and data is given, the field's distinct values are offered with a row count each.
pinnedboolean—Pinned chips always show ("All" when unset). Unpinned fields are offered by "Add filter".
multipleboolean—Allow several values (an "in" predicate). Defaults to true.

FilterOption

PropTypeDefaultDescription
valuerequiredPrimitive——
labelReactNode—Display text. Defaults to the value.
metaReactNode—Right-aligned mono detail, e.g. a count or a total.

Accessibility

  • Chips are buttons that open checkbox menus; arrow keys, Home and End move in a menu.
  • Each chip's clear button is a separate, labelled button.
Report an issueBuilt Oct 21, 2026