Data
FilterBarNew in 0.8.0
Composable filter chips. Add typed conditions, edit or remove them, and save the set as a named view.
FilterBarapplyFiltersPreview
No filters — showing everyone
- Ada Lovelace · 36 · active · VIP
- Alan Turing · 41 · paused
- Grace Hopper · 85 · active
- Linus Torvalds · 55 · active · VIP
- Margaret Hamilton · 88 · paused
Usage
tsx
import { FilterBar, applyFilters, type FilterField } from "@vesture/react";
const fields: FilterField[] = [
{ key: "name", label: "Name", type: "text" },
{ key: "age", label: "Age", type: "number" },
];
const [filters, setFilters] = useState([]);
const visible = applyFilters(rows, filters, fields);
<FilterBar fields={fields} value={filters} onChange={setFilters} />Behavior
- Each field has a type (text, number, select, date, boolean) that determines its operators and value input.
- applyFilters(rows, conditions, fields) is a pure helper that ANDs the conditions — use it client-side, or translate the conditions into your API query.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| fields | { key; label; type; options?; operators? }[] | — | Required. |
| value / defaultValue / onChange | FilterCondition[] | — | { id; field; operator; value }[]. |
| views / onSaveView / onDeleteView | FilterView[] / function | — | Enables saved views. |
| addLabel / clearLabel / emptyHint | string / ReactNode | — | Copy. |
| renderChip | (condition, field, defaultLabel) => ReactNode | — | Replaces a chip's text. |