ExperimentalmoleculeData

ColumnFilterMenu

A table column header that filters its own rows.

import { … } from "@brdgapp/ui/components/column-filter-menu"

Usage

ColumnFilterMenu is a table column header that filters its own rows: the column's icon and name with a chevron, opening the same single-choice menu as FilterPill. When a filter is on, the label turns blue and a dot appears, so it's visible without opening the menu.

When to use

A column whose values are a short fixed list: category, status, source.

When not to use

For a filter that applies to the whole table. Use FilterPill instead.
For sorting. Use ColumnSortButton instead.

Anatomy

Header. Icon, 12px Bold label, a blue dot when filtered, a chevron.
Menu. 220px wide, aligned to the header's left edge, scrolls past 320px. Same rows as FilterPill.

Examples

Filter the Category column

Filters the sample intros.

8 of 8 intros

States

	Rest	Hover	Focus
All
Filtered

State	What happens
All	Secondary label.
Filtered	Blue label and icon, a blue dot.
Open	Chevron flips; the column's tooltip is hidden so it doesn't cover the menu.

Behavior

Built on Base UI Menu with radio items, like FilterPill.
The header's click doesn't reach a clickable row behind it.

Do and don't

Show the filtered count near the table ("3 of 8 intros").

Don't

Filter silently, so rows just vanish.

Content

First option: "All {things}".

Accessibility

Its name includes the state: "Filter by category: Sales".

Keys	Action
`EnterSpace↓`	Open.
`↑↓Enter`	Choose.
`Esc`	Close.

API reference