DataFilter

A rich interface to create data filters. Filters are represented as a set of operations on individual fields of the data records. Each operation is represented by a Chip.

Basic DataFilter

Add a filter

[]

<DataFilter options={options} value={value} onChange={setValue} />

Custom Operators

You can define your own operators.

Add a filter

[]

operators: [
  {
    operator: 'oneOf',
    label: 'is one of',
    defaultValue: [],
    InputComponent: SelectInput,
  },
],

Different Sizes

The DataFilter component supports different sizes through the size property.

Add a filter

<DataFilter {...props} size="small" />
<DataFilter {...props} size="medium" />