FilterBuilder

Builds a filter of nested AND / OR groups of conditions (column, operator, value). It is a controlled editor over a FilterGroup; applyAdvancedFilter evaluates it. It adapts to the width of its container: fields stack when it is narrow.

Import

import { FilterBuilder } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/data-grid.

Usage

export const Default: Story = { render: () => <Demo start={initial} /> };

Source of the Storybook story.

Props

Prop	Type	Default	Description
columns *	readonly DataGridColumn<T>[]
value *	FilterGroup
onChange *	(next: FilterGroup) => void
valuesOf	((columnId: string) => string[])		Values offered for select-like columns; a text box is used when absent or empty.
labels	Partial<DataGridLabels>
className	string

* marks a required prop.

Storybook stories

• Default
• Empty
• Narrow

Source

packages/ui/src/containers/data-grid/filter-builder-editor.tsx