Search nx-ui
Jump to any foundation, component, block or example.
Filter Bar
The toolbar shown above a table or list — a search input, inline filter triggers, a More filters popover with an active-count badge, and removable active-filter chips.
$
Registry itembunx shadcn@latest add @nx-ui/filter-barMovements filter bar
Search, filter by organisation, switch view and layer on more filters. Active filters appear as removable chips with Clear all.
Verified
Search only
Every part is optional — omit More filters and the toggle for a minimal bar.
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
search | string | — | Controlled search text. |
onSearchChange | (value: string) => void | — | — |
searchPlaceholder | string | "Search" | — |
children | React.ReactNode | — | Inline filter triggers (Selects / DropdownMenus) rendered before "More filters". |
moreFilters | FilterGroup[] | — | Extra filter groups shown inside the "More filters" popover. |
selectedFilters | Set<string> | — | Set of selected option keys, formatted `${groupId}:${value}`. |
onToggleFilter | (groupId: string, value: string, next: boolean) => void | — | — |
activeFilters | ActiveFilter[] | — | Active filter chips to display beneath the toolbar. |
onClearFilter | (filter: ActiveFilter) => void | — | — |
onClearAll | () => void | — | — |
…extends Omit<React.ComponentProps<"div">, "onChange">