Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA three-step filter builder in one popover: choose a field, then an operator that fits its type, then a value, and the filter becomes a removable chip. Use this when people build precise filters without a query language.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for tables and reports with typed columns (text, number, choice), where each filter is one field, one operator and one value and people should not have to learn syntax.
Do not use it when filters need grouping with AND/OR. Use a full query builder.
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 |
| --------------- | ------------------------------ | ----------- | --------------------------------------- | --- | ----------------------------- |
| fields | { key, label, type: "text" \\ | "number" \\ | "select", options? }[] | - | What can be filtered and how. |
| value | { id, field, op, value }[] | - | The filters (controlled). |
| defaultValue | Filter[] | [] | Initial filters. |
| onValueChange | (filters) => void | - | Runs when a filter is added or removed. |
Filter 2 of 3) and a polite status keep screen-reader users oriented.contains, is, is not), number (=, >, <) and choice (is, is not).Status is Open; their Remove buttons are named after the whole filter.The pattern ships with a Testing Library test (filter-builder-field-op-value.test.tsx) that covers the three steps, operators by type, applying text, number and choice values, removing and going back with Escape.