---
title: "Filter Component"
framework: javascript
version: "36.1.0"
---

# Filter Component

Filter components allow you to add your own filter types to AG Grid. Use them when the Provided Filters do not meet your requirements.

The example below shows a custom filter on the `Athlete` column with "fuzzy" matching.

#### Custom Filter Component

```ts
import {
  ClientSideRowModelModule,
  ColDef,
  CustomFilterModule,
  DoesFilterPassParams,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { PersonFilter } from "./personFilter";
import { IOlympicData } from "./interfaces";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([CustomFilterModule, ClientSideRowModelModule]);

function doesFilterPass({
  model,
  node,
  handlerParams,
}: DoesFilterPassParams<any, any, string>): boolean {
  // make sure each word passes separately, ie search for firstname, lastname
  let passed = true;
  model
    .toLowerCase()
    .split(" ")
    .forEach((filterWord) => {
      const value = handlerParams.getValue(node);
      if (value.toString().toLowerCase().indexOf(filterWord) < 0) {
        passed = false;
      }
    });

  return passed;
}

const columnDefs: ColDef[] = [
  {
    field: "athlete",
    minWidth: 150,
    filter: { component: PersonFilter, doesFilterPass: doesFilterPass },
  },
  { field: "country", minWidth: 150 },
  { field: "sport" },
  { field: "year", minWidth: 130 },
  { field: "gold" },
  { field: "silver" },
  { field: "bronze" },
  { field: "total" },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  columnDefs: columnDefs,
  enableFilterHandlers: true,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) => {
    gridApi!.setGridOption("rowData", data);
  });
```

[Live example: Custom Filter Component](https://www.ag-grid.com/examples/component-filter/custom-filter/typescript)

## Implementing a Filter Component

To configure custom filters, first enable the grid option `enableFilterHandlers`.

> **Note**
>
> If you do not enable the grid option `enableFilterHandlers`, it is still possible to use custom filters, however this will involve embedding your filter logic into the custom component, and is not recommended. See [Legacy Filter Component](https://www.ag-grid.com/javascript-data-grid/component-filter-legacy/).

Implementing a custom filter requires two parts:

- The custom filter component which will be displayed to the user.
- The logic to run the filter.

The custom filter component receives a filter model as part of the params (which is updated when the `refresh` method is called). When the model is changed via the UI, it should pass model updates back to the grid via the `onModelChange` callback.

A filter model of `null` means that no filter is applied (the filter displays as inactive). Note that the filter is applied immediately when `onModelChange` is called. This behaviour can be changed by [Using Buttons](#using-buttons).

Custom filter components implement the `FilterDisplayComp` interface. The `getGui()` method returns the filter's DOM element, and `refresh(params)` is called when the filter parameters change. Return `false` from `refresh` to have the grid destroy and recreate the filter; otherwise the existing filter is reused.

Full details of the `FilterDisplayComp` interface are listed below under [API Reference](#api-reference).

## Custom Filter Parameters

The `init(params)` method takes a params object with the items listed below. If custom params are provided via the `colDef.filterParams` property, these will be additionally added to the params object, overriding items of the same name if a name clash exists.

Properties available on the `FilterDisplayParams&lt;TData = any, TContext = any, TModel = any, TState = any&gt;` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `model` | `TModel \| null` |  |  | The current applied filter model for the component. |
| `state` | `FilterDisplayState<TModel, TState>` |  |  | The current state to display in the component. |
| `onModelChange` | `Function` |  |  | Callback that should be called every time the model in the component changes. `additionalEventAttributes` If provided, will be passed to the filter changed event |
| `onStateChange` | `Function` |  |  | If using the filter with apply buttons, callback that should be called every time the unapplied model in the component changes. |
| `onAction` | `Function` |  |  | Can be called to manually apply any of the filter actions that would be done via buttons. `additionalEventAttributes` If provided, will be passed to the filter changed event `event` If the action was via the keyboard, provide the event here for correct focus handling. |
| `onUiChange` | `Function` |  |  | Callback that can be optionally called every time the filter UI changes. The grid will respond with emitting a FilterUiChangedEvent. Apart from emitting the event, the grid takes no further action. The callback takes one optional parameter which, if included, will get merged to the FilterUiChangedEvent object. |
| `getHandler` | `Function` |  |  | Get the filter handler instance. If using a `SimpleColumnFilter`, the handler is is a wrapper object containing the provided `doesFilterPass` callback. |
| `source` | `FilterDisplaySource` |  |  | FilterDisplaySource |
| `additionalEventAttributes` | `any` |  |  | If this refresh was as a result of the filter triggering an update with additional event attributes, these will be set here |
| `column` | [`Column`](https://www.ag-grid.com/javascript-data-grid/column-object/) |  |  | The column this filter is for. |
| `colDef` | [`ColDef`](https://www.ag-grid.com/javascript-data-grid/column-properties/) |  |  | The column definition for the column. |
| `getValue` | `Function` |  |  | Get the cell value for the given row node and column, which can be the column ID, definition, or `Column` object. If no column is provided, the column this filter is on will be used. |
| `doesRowPassOtherFilter` | `Function` |  |  | A function callback, call with a node to be told whether the node passes all filters except the current filter. This is useful if you want to only present to the user values that this filter can filter given the status of the other filters. The set filter uses this to remove from the list, items that are no longer available due to the state of other filters (like Excel type filtering). |
| `api` | [`GridApi`](https://www.ag-grid.com/javascript-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/javascript-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |

## Filter Logic

The logic to run the filter can be provided in one of two ways:

- As a `doesFilterPass` callback for simple filter cases.
- As a filter handler object for more complex filter cases.

The logic is passed via the `filter` property along with the custom component as a `ColumnFilter` object.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `component` | `any` |  |  | Filter component to use for this column. Set to the name of a provided filter: `agNumberColumnFilter`, `agBigIntColumnFilter`, `agTextColumnFilter`, `agDateColumnFilter`. Set to a custom filter `FilterDisplay` |
| `doesFilterPass` | `Function` |  |  | Contains the logic for executing the filter. If the filter is active, will be called for each row in the grid to see if it passes. If any filter fails, then the row will be excluded from the final set. Not required if providing a `handler`, or if not using Client-Side Row Model. |
| `handler` | `string \| CreateFilterHandlerFunc<TData, TValue, TContext, TModel, TCustomParams>` |  |  | Returns a handler which contains the logic for executing the filter. Allows for more complex filter cases than `doesFilterPass`. Not required if providing `doesFilterPass` (but will take precedence), or if not using Client-Side Row Model. |

> **Note**
>
> The filter logic is only used with the [Client-Side Row Model](https://www.ag-grid.com/javascript-data-grid/row-models/). If being used exclusively with other row models, it does not need to be provided as the filtering logic is performed on the server. If a handler is provided, it will still be instantiated, but `doesFilterPass` will not be called.

### doesFilterPass Callback

```js
const gridOptions = {
    columnDefs: [
        {
            field: 'year',
            filter: {
                component: YearFilter, // custom filter component
                doesFilterPass: (params) => {
                    // evaluate filter for row here
                    return params.model === params.handlerParams.getValue(params.node);
                },
            },
        }
    ],

    // other grid options ...
}
```

The callback `doesFilterPass(params)` will be called for each row when filtering is performed (and the filter is active), and takes the following as a parameter:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `model` | `TModel` |  |  | TModel |
| `handlerParams` | `FilterHandlerBaseParams<TData, TContext, TModel, TCustomParams>` |  |  | Utility params that would be passed to the handler, including `getValue` which provides access to the cell values. |
| `node` | [`IRowNode`](https://www.ag-grid.com/javascript-data-grid/row-object/) |  |  | The row node in question. |
| `data` | [`TData`](https://www.ag-grid.com/javascript-data-grid/typescript-generics/#row-data-tdata) |  |  | The data part of the row node in question. |

### Filter Handler

```js
const gridOptions = {
    columnDefs: [
        {
            field: 'year',
            filter: {
                component: YearFilter, // custom filter component
                handler: (params) => ({
                    doesFilterPass: (params) => {
                        // evaluate filter for row here
                        return passes;
                    },
                    // other handler methods
                }),
            },
        }
    ],

    // other grid options ...
}
```

The filter handler function should return a `FilterHandler` which will be created when the filter is active. The `doesFilterPass` method on the evaluator will be called for each row when filtering is performed (and the filter is active).

The filter handler is useful for when the filter model needs parsing to allow for fast comparison of values. The handler is passed the latest filter model via the `init` / `refresh` methods, which can then process the model before `doesFilterPass` is called.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `init` | `Function` |  |  | Optional: Called once when the handler is created. |
| `refresh` | `Function` |  |  | Optional: Called every time the handler is updated, e.g. when the model changes. |
| `doesFilterPass` | `Function` |  |  | The grid will ask each active filter, in turn, whether each row in the grid passes. If any filter fails, then the row will be excluded from the final set. |
| `getModelAsString` | `Function` |  |  | Optional: Used by AG Grid when rendering floating filters and there isn't a floating filter associated for this filter, this will happen if you create a custom filter and NOT a custom floating filter. |
| `processModelToApply` | `Function` |  |  | Optional: When using an apply button with the filter, this method will be called before the apply happens, The returned model will be applied, allowing for any validation or updates to be performed. |
| `destroy` | `Function` |  |  | Optional: Gets called once by grid when the component is being removed; if your component needs to do any cleanup, do it here |
| `onNewRowsLoaded` | `Function` |  |  | Optional: Gets called when new rows are inserted into the grid. If the filter needs to change its state after rows are loaded, it can do it here. For example the set filters uses this to update the list of available values to select from (e.g. 'Ireland', 'UK' etc for Country filter). To get the list of available values from within this method from the Client Side Row Model, use `gridApi.forEachLeafNode(callback)`. |
| `onAnyFilterChanged` | `Function` |  |  | Optional: Called whenever any filter is changed. |

It is also possible to define filter handlers in the `filterHandlers` grid option, and then refer to them by the string key in the column definition.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `filterHandlers` | `FilterHandlers` |  |  | A map of filter handler key to filter handler function. Allows for filter handler keys to be used in `colDef.filter.handler`. [Initial](https://www.ag-grid.com/javascript-data-grid/grid-interface/#initial-grid-options). |

## Using Buttons

It is possible to use the [Filter Buttons](https://www.ag-grid.com/javascript-data-grid/filter-applying/) for grid-provided filters with custom filter components.

#### Filter Buttons

```ts
import {
  ClientSideRowModelModule,
  ColDef,
  CustomFilterModule,
  DoesFilterPassParams,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { YearFilter } from "./yearFilter";
import { IOlympicData } from "./interfaces";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([CustomFilterModule, ClientSideRowModelModule]);

function doesFilterPass({
  model,
  node,
  handlerParams,
}: DoesFilterPassParams<any, any, boolean>): boolean {
  return model ? handlerParams.getValue(node) > 2010 : true;
}

const columnDefs: ColDef[] = [
  {
    field: "athlete",
    minWidth: 150,
  },
  {
    field: "year",
    headerName: "Year Default",
    minWidth: 130,
    filter: { component: YearFilter, doesFilterPass: doesFilterPass },
  },
  {
    field: "year",
    headerName: "Year Apply",
    minWidth: 130,
    filter: { component: YearFilter, doesFilterPass: doesFilterPass },
    filterParams: {
      useForm: true,
      buttons: ["apply"],
      closeOnApply: true,
    },
  },
  {
    field: "year",
    headerName: "Year Reset",
    minWidth: 130,
    filter: { component: YearFilter, doesFilterPass: doesFilterPass },
    filterParams: {
      buttons: ["reset"],
    },
  },
  { field: "sport" },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  columnDefs: columnDefs,
  enableFilterHandlers: true,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) => {
    gridApi!.setGridOption("rowData", data);
  });
```

[Live example: Filter Buttons](https://www.ag-grid.com/examples/component-filter/custom-filter-buttons/typescript)

The example above demonstrates using filters with buttons via the same custom filter component:

- The **Year Default** column does not use buttons.
- The **Year Apply** column uses the apply button, and additionally closes the filter popup on apply.
- The **Year Reset** column uses the reset button, which will set the filter back to the default model and apply it.

The buttons are configured by passing additional parameters to the filter (interface `FilterWrapperParams`).

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `buttons` | `FilterAction[]` |  |  | Specifies the buttons to be shown in the filter, in the order they should be displayed in. The options are: `'apply'`: If the Apply button is present, the filter is only applied after the user hits the Apply button. `'clear'`: The Clear button will clear the (form) details of the filter without removing any active filters on the column. `'reset'`: The Reset button will clear the details of the filter and any active filters on that column. `'cancel'`: The Cancel button will discard any changes that have been made to the filter in the UI, restoring the applied model. |
| `closeOnApply` | `boolean` |  | `false` | When this is set to `true`, the following will happen after clicking a filter button: Apply closes popup. Reset closes popup if Apply button is present. Cancel closes popup. |

When the buttons are pressed, the custom filter `state` parameter will be updated via the `refresh(params)` method, with `state.model` being the model that should be displayed in the filter.

With the `Apply` button present, the filter component no longer needs to call `onModelChange(model)` as the grid will apply the model when the button is clicked (although it can still be called if the component wants to apply a model in some other way). Instead, the filter component will call `onStateChange({ model })` with the model that is currently displayed in the filter component. This is the model that the grid will apply when the button is clicked. If the filter is being used without buttons, it can also call `onAction('apply')` to apply the model set via the state.

## Associating Floating Filter

If you create your own filter you have two options to get floating filters working for that filter:

1. You can create your own [Custom Floating Filter](https://www.ag-grid.com/javascript-data-grid/component-floating-filter/).
2. You can implement the `getModelAsString()` method on your filter evaluator. If you implement this method and don't provide a custom floating filter, AG Grid will automatically provide a read-only version of a floating filter. See [Custom Filter And Read-Only Floating Filter](https://www.ag-grid.com/javascript-data-grid/component-floating-filter/#example-custom-filter-and-read-only-floating-filter).

If you don't provide either of these two options for your custom filter, the display area for the floating filter will be empty.

## Custom Filters Containing a Popup Element

Sometimes you will need to create custom components for your filters that also contain popup elements. This is the case for Date Filter as it pops up a Date Picker. If the library you use anchors the popup element outside of the parent filter, then when you click on it the grid will think you clicked outside of the filter and hence close the column menu.

There are two ways you can get fix this problem:

- Add a mouse click listener to your floating element and set it to `preventDefault()`. This way, the click event will not bubble up to the grid. This is the best solution, but you can only do this if you are writing the component yourself.
- Add the `ag-custom-component-popup` CSS class to your floating element. An example of this usage can be found here: [Custom Date Component](https://www.ag-grid.com/javascript-data-grid/filter-date/#custom-selection-component)

## Using Custom Filters with Grid-Provided Filter Logic

It is possible to use the grid-provided filter logic with custom filter components.

```js
const gridOptions = {
    columnDefs: [
        {
            field: 'year',
            filter: {
                component: YearFilter, // custom filter component
                handler: 'agNumberColumnFilterHandler', // grid-provided Number Filter handler
            },
        }
    ],

    // other grid options ...
}
```

The grid-provided handlers are:

- `'agTextColumnFilterHandler'` - [Text Filter](https://www.ag-grid.com/javascript-data-grid/filter-text/) handler.
- `'agNumberColumnFilterHandler'` - [Number Filter](https://www.ag-grid.com/javascript-data-grid/filter-number/) handler.
- `'agBigIntColumnFilterHandler'` - [BigInt Filter](https://www.ag-grid.com/javascript-data-grid/filter-bigint/) handler.
- `'agDateColumnFilterHandler'` - [Date Filter](https://www.ag-grid.com/javascript-data-grid/filter-date/) handler.

> **Note**
>
> [Set Filter](https://www.ag-grid.com/javascript-data-grid/filter-set/) and [Multi Filter](https://www.ag-grid.com/javascript-data-grid/filter-multi/) are not supported when using custom filters with grid-provided filter logic.

The example below demonstrates using the Number Filter handler with a custom filter component:

#### Use Grid Handlers

```ts
import {
  ClientSideRowModelModule,
  ColDef,
  CustomFilterModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  NumberFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { YearFilter } from "./yearFilter";
import { IOlympicData } from "./interfaces";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  CustomFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
]);

const columnDefs: ColDef[] = [
  {
    field: "athlete",
    minWidth: 150,
  },
  {
    field: "year",
    headerName: "Year Default",
    minWidth: 130,
    filter: { component: YearFilter, handler: "agNumberColumnFilterHandler" },
  },
  {
    field: "year",
    headerName: "Year Apply",
    minWidth: 130,
    filter: { component: YearFilter, handler: "agNumberColumnFilterHandler" },
    filterParams: {
      useForm: true,
      buttons: ["apply"],
      closeOnApply: true,
    },
  },
  { field: "sport" },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  columnDefs: columnDefs,
  enableFilterHandlers: true,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) => {
    gridApi!.setGridOption("rowData", data);
  });
```

[Live example: Use Grid Handlers](https://www.ag-grid.com/examples/component-filter/use-grid-handlers/typescript)

## Accessing the Component Instance

AG Grid allows you to get a reference to the filter component instances via the `api.getColumnFilterInstance(colKey)` method.

Similarly, you can get a reference to the filter handler via `api.getColumnFilterHandler(colKey)`.

The example below illustrates how a custom filter component can be accessed and methods on it invoked. If you click on the `Invoke Filter Instance Method` button, it will invoke the instance `componentMethod`, which logs to the developer console.

#### Filter Component Instance

```ts
import {
  ClientSideRowModelModule,
  ColDef,
  CustomFilterModule,
  DoesFilterPassParams,
  GridApi,
  GridOptions,
  ModuleRegistry,
  TextEditorModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { getData } from "./data";
import { PartialMatchFilter } from "./partialMatchFilter";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  TextEditorModule,
  CustomFilterModule,
  ClientSideRowModelModule,
]);

function doesFilterPass({
  model,
  node,
  handlerParams,
}: DoesFilterPassParams<any, any, string>): boolean {
  const value = handlerParams.getValue(node).toString().toLowerCase();
  return model
    .toLowerCase()
    .split(" ")
    .every((filterWord) => value.indexOf(filterWord) >= 0);
}

const columnDefs: ColDef[] = [
  { field: "row" },
  {
    field: "name",
    filter: { component: PartialMatchFilter, doesFilterPass: doesFilterPass },
  },
];

let gridApi: GridApi;

const gridOptions: GridOptions = {
  defaultColDef: {
    editable: true,
    flex: 1,
    minWidth: 100,
    filter: true,
  },
  columnDefs: columnDefs,
  rowData: getData(),
  enableFilterHandlers: true,
};

function onClicked() {
  gridApi!
    .getColumnFilterInstance<PartialMatchFilter>("name")
    .then((instance) => {
      instance!.componentMethod("Hello World!");
    });
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onClicked = onClicked;
}
```

[Live example: Filter Component Instance](https://www.ag-grid.com/examples/component-filter/filter-component/typescript)

## API Reference

### FilterDisplayComp

Properties available on the `FilterDisplayComp&lt;TData = any, TContext = any, TModel = any&gt;` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `getGui` | `Function` |  |  | Return the DOM element of your component, this is what the grid puts into the DOM |
| `destroy` | `Function` |  |  | Gets called once by grid when the component is being removed; if your component needs to do any cleanup, do it here |
| `init` | `Function` |  |  | The init(params) method is called on the component once. |
| `refresh` | `Function` |  |  | Called when the column definition, state or model is updated. |
| `afterGuiAttached` | `Function` |  |  | Optional: A hook to perform any necessary operation just after the GUI for this component has been rendered on the screen. If a parent popup is closed and reopened (e.g. for filters), this method is called each time the component is shown. This is useful for any logic that requires attachment before executing, such as putting focus on a particular DOM element. |
| `afterGuiDetached` | `Function` |  |  | Optional: A hook to perform any necessary operation just after the GUI for this component has been removed from the screen. If a parent popup is opened and closed (e.g. for filters), this method is called each time the component is hidden. This is useful for any logic to reset the UI state back to the model before the component is reopened. |
| `onNewRowsLoaded` | `Function` |  |  | Optional: Gets called when new rows are inserted into the grid. If the filter needs to change its state after rows are loaded, it can do it here. For example the set filters uses this to update the list of available values to select from (e.g. 'Ireland', 'UK' etc for Country filter). To get the list of available values from within this method from the Client Side Row Model, use `gridApi.forEachLeafNode(callback)`. |
| `onAnyFilterChanged` | `Function` |  |  | Optional: Called whenever any filter is changed. |

### FilterDisplayParams

Properties available on the `FilterDisplayParams&lt;TData = any, TContext = any, TModel = any, TState = any&gt;` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `model` | `TModel \| null` |  |  | The current applied filter model for the component. |
| `state` | `FilterDisplayState<TModel, TState>` |  |  | The current state to display in the component. |
| `onModelChange` | `Function` |  |  | Callback that should be called every time the model in the component changes. `additionalEventAttributes` If provided, will be passed to the filter changed event |
| `onStateChange` | `Function` |  |  | If using the filter with apply buttons, callback that should be called every time the unapplied model in the component changes. |
| `onAction` | `Function` |  |  | Can be called to manually apply any of the filter actions that would be done via buttons. `additionalEventAttributes` If provided, will be passed to the filter changed event `event` If the action was via the keyboard, provide the event here for correct focus handling. |
| `onUiChange` | `Function` |  |  | Callback that can be optionally called every time the filter UI changes. The grid will respond with emitting a FilterUiChangedEvent. Apart from emitting the event, the grid takes no further action. The callback takes one optional parameter which, if included, will get merged to the FilterUiChangedEvent object. |
| `getHandler` | `Function` |  |  | Get the filter handler instance. If using a `SimpleColumnFilter`, the handler is is a wrapper object containing the provided `doesFilterPass` callback. |
| `source` | `FilterDisplaySource` |  |  | FilterDisplaySource |
| `additionalEventAttributes` | `any` |  |  | If this refresh was as a result of the filter triggering an update with additional event attributes, these will be set here |
| `column` | [`Column`](https://www.ag-grid.com/javascript-data-grid/column-object/) |  |  | The column this filter is for. |
| `colDef` | [`ColDef`](https://www.ag-grid.com/javascript-data-grid/column-properties/) |  |  | The column definition for the column. |
| `getValue` | `Function` |  |  | Get the cell value for the given row node and column, which can be the column ID, definition, or `Column` object. If no column is provided, the column this filter is on will be used. |
| `doesRowPassOtherFilter` | `Function` |  |  | A function callback, call with a node to be told whether the node passes all filters except the current filter. This is useful if you want to only present to the user values that this filter can filter given the status of the other filters. The set filter uses this to remove from the list, items that are no longer available due to the state of other filters (like Excel type filtering). |
| `api` | [`GridApi`](https://www.ag-grid.com/javascript-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/javascript-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |