ColumnFilterButton

Column-header filter popover for text, facets, numbers, and dates. The host owns the applied value; the button shows whether the column is filtered.

Playground

Hover the column label to reveal its filter. Apply or clear a condition to update the state below; facet selections apply immediately.

const [filter, setFilter] = useState<ColumnFilterValue | null>(null);
<ColumnFilterButton
  columnId="text"
  columnLabel="Name"
  spec={{"kind":"text"}}
  value={filter}
  onChange={setFilter}
/>

Name

No filter applied.