FilterBuilder

Editor for a single filter condition — picks the field, operator, and value input by field type.

FilterBuilder is the editor for one filter condition. Given the available fields, it renders a field picker, an operator picker scoped to that field's type (e.g. "contains", "is any of", "between"), and the right value input — text, number, tag list, date range, or faceted select — automatically. It is controlled: it calls onChange with a partial patch as the user edits and onRemove to delete the condition. FilterBar composes this internally; use it directly to build a custom filter row.

Example

Preview

import { FilterBuilder } from '@officina/ui';

<FilterBuilder
  condition={condition}
  fields={[
    { id: 'name', label: 'Name', type: 'string' },
    { id: 'createdAt', label: 'Created', type: 'date' },
  ]}
  onChange={(id, patch) => updateCondition(id, patch)}
  onRemove={(id) => removeCondition(id)}
/>;

API

Prop	Type	Default	Description
condition*	FilterCondition	—	The single filter condition being edited.
fields*	FilterFieldDef<TRow>[]	—	Available fields the condition can target, with their operators/types.
onChange*	(id: string, patch: Partial<Omit<FilterCondition, "id">>) => void	—	Called with the condition id and a partial patch when any part changes.
onRemove*	(id: string) => void	—	Called with the condition id when the user removes it.

Example

API

On this page