Patterns · Data
FilterBar
Since v0.0.1
Search + filter toolbar pattern for data-heavy list or table views.
import { FilterBar } from '@nexub/patterns';Examples
Default
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| searchPlaceholder | string | 'Search…' | Placeholder text for the search input. |
| searchValue | string | — | Controlled search value. |
| onSearch | (value: string) => void | — | Callback when search value changes. |
| filters | React.ReactNode | — | Filter controls rendered to the right of search. |
| actions | React.ReactNode | — | Action buttons (e.g. "Export") rendered on the far right. |
On iOS & Android
Web only
FilterBar has no @nexub/react-native twin. On phones, follow the platform pattern instead, or compose it from the native components listed on the React Native page.