Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA faceted filter button for tables and lists: a multi-select with per-option counts, a compact summary of what is selected and a Clear filters row. Use this when people narrow a list by one property at a time.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it in data-table and list toolbars, one button per property (Status, Owner, Label), where seeing how many rows each value would match helps people choose.
Do not use it when a filter needs ranges or free text. Use a number-range or search input; this one lists discrete values.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | Names the facet, e.g. Status. |
options | { value, label, count?, icon? }[] | - | The values and how many rows each matches. |
value | string[] | - | Selected values (controlled). |
defaultValue | string[] | [] | Initial selection. |
onValueChange | (value: string[]) => void | - | Runs on every change. |
searchFrom | number | 7 | Show the search box when there are at least this many options. |
combobox named <title> filter, N selected; the summary badges inside it are plain text.aria-checked, the list is aria-multiselectable.Open, 12.The pattern ships with a Testing Library test (faceted-filter-chips-counts.test.tsx) that covers the summary for one, two and many selections, counts in rows, clearing and the search box appearing only for long lists.