# FilterBuilder

> Builds a filter of nested AND / OR groups of conditions (column, operator, value).

Source: https://ui.jcsoftdev.com/docs/components/filter-builder

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

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

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

## Usage

```tsx
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](/storybook/?path=/story/containers-datagrid-filterbuilder--default)
- [Empty](/storybook/?path=/story/containers-datagrid-filterbuilder--empty)
- [Narrow](/storybook/?path=/story/containers-datagrid-filterbuilder--narrow)

## Source

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