---
id: "packages/active-grid/api/components-filters"
title: "Filters (components)"
description: "BooleanFilter, DateFilter, FilterCheckboxItem, FilterClearButton and 14 more: generated from the source of active-grid."
url: "/packages/active-grid/api/components-filters"
locale: "en"
revision: "g0mvjxwj5c-88bdbe1c:components-filters"
---

# Filters (components)

Exported by `@workspace/active-grid`. Generated from the package source; part of [the index of every export](/packages/active-grid/api).

## `BooleanFilter`

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `column` | `Column<TData, unknown>` | yes |  |
| `labels` | `{ all?: string; true?: string; false?: string; }` | no |  |
| `placeholder` | `string` | no |  |
| `variant` | `"icon" \| "text"` | no |  |

## `DateFilter`

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `column` | `Column<TData, unknown>` | yes |  |
| `placeholder` | `string` | no |  |

## `FilterCheckboxItem`

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `checked` | `boolean` | yes |  |
| `label` | `string` | yes |  |
| `onChange` | `(checked: boolean) => void` | yes |  |
| `className` | `string` | no |  |

## `FilterClearButton`

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `onClick` | `() => void` | yes |  |
| `className` | `string` | no |  |

## `FilterDateInput`

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `onChange` | `(value: string) => void` | yes |  |
| `value` | `string` | yes |  |

## `FilterNumberInput`

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `onChange` | `(value: string) => void` | yes |  |
| `value` | `string` | yes |  |

## `FilterOperatorSelect`

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `onChange` | `(value: string) => void` | yes |  |
| `options` | `{ value: string; label: string; }[]` | yes |  |
| `value` | `string` | yes |  |
| `className` | `string` | no |  |

## `FilterPopover`

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | yes |  |
| `onOpenChange` | `((open: boolean) => void)` | no |  |
| `open` | `boolean` | no |  |

## `FilterPopoverBody`

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | yes |  |
| `className` | `string` | no |  |

## `FilterPopoverContent`

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `className` | `string` | no |  |
| `align` | `Align` | no | How to align the popup relative to the specified side. |
| `alignOffset` | `number \| OffsetFunction` | no | Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment.  The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. |
| `finalFocus` | `boolean \| RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => void \| boolean \| HTMLElement \| null)` | no | Determines the element to focus when the popover is closed.  - `false`: Do not move focus. - `true`: Move focus based on the default behavior (trigger or previously focused element). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. |
| `initialFocus` | `boolean \| RefObject<HTMLElement \| null> \| ((openType: InteractionType) => void \| boolean \| HTMLElement \| null)` | no | Determines the element to focus when the popover is opened. By default, focus moves to the first tabbable element inside the popup, except when the popover is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.  - `false`: Do not move focus. - `true`: Move focus based on the default behavior (first tabbable element or popup). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. |
| `render` | `ComponentRenderFn<HTMLProps, PopoverPopupState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` | no | Allows you to replace the component's HTML element with a different tag, or compose it with another component.  Accepts a `ReactElement` or a function that returns the element to render. |
| `side` | `Side` | no | Which side of the anchor element to align the popup against. May automatically change to avoid collisions. |
| `sideOffset` | `number \| OffsetFunction` | no | Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment.  The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. |

## `FilterPopoverHeader`

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | yes |  |
| `className` | `string` | no |  |

## `FilterPopoverTrigger`

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `closeDelay` | `number` | no | How long to wait before closing the popover that was opened on hover. Specified in milliseconds.  Requires the `openOnHover` prop. |
| `delay` | `number` | no | How long to wait before the popover may be opened on hover. Specified in milliseconds.  Requires the `openOnHover` prop. |
| `handle` | `PopoverHandle<unknown>` | no | A handle to associate the trigger with a popover. |
| `id` | `string` | no | ID of the trigger. In addition to being forwarded to the rendered element, it is also used to specify the active trigger for the popover in controlled mode (with the PopoverRoot `triggerId` prop). |
| `nativeButton` | `boolean` | no | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`). Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (e.g. `<div>`). |
| `openOnHover` | `boolean` | no | Whether the popover should also open when the trigger is hovered. |
| `payload` | `unknown` | no | A payload to pass to the popover when it is opened. |
| `render` | `ComponentRenderFn<HTMLProps, PopoverTriggerState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` | no | Allows you to replace the component's HTML element with a different tag, or compose it with another component.  Accepts a `ReactElement` or a function that returns the element to render. |

## `FilterSearchInput`

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `onChange` | `(value: string) => void` | yes |  |
| `value` | `string` | yes |  |
| `className` | `string` | no |  |
| `placeholder` | `string` | no |  |

## `FilterTextInput`

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `onChange` | `(value: string) => void` | yes |  |
| `value` | `string` | yes |  |
| `onClear` | `(() => void)` | no |  |
| `showClear` | `boolean` | no |  |

## `FilterWrapper`

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `column` | `Column<TData, unknown>` | yes |  |
| `facets` | `Record<string, FacetOption[]>` | no |  |
| `placeholder` | `string` | no |  |

## `NumberFilter`

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `column` | `Column<TData, unknown>` | yes |  |
| `placeholder` | `string` | no |  |

## `SelectFilter`

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `column` | `Column<TData, unknown>` | yes |  |
| `maxHeight` | `number` | no |  |
| `options` | `SelectFilterOption[]` | no |  |
| `placeholder` | `string` | no |  |
| `searchable` | `boolean` | no |  |
| `serverFacets` | `SelectFilterOption[]` | no |  |
| `showSelectAll` | `boolean` | no |  |

## `TextFilter`

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `column` | `Column<TData, unknown>` | yes |  |
| `placeholder` | `string` | no |  |