---
title: "Multi Filter"
enterprise: true
framework: javascript
version: "36.1.0"
---

# Multi Filter

The Multi Filter allows multiple [Provided Filters](https://www.ag-grid.com/javascript-data-grid/filtering/#column-filter-types) or [Custom Filters](https://www.ag-grid.com/javascript-data-grid/component-filter/) to be used on the same column. This provides greater flexibility when filtering data in the grid.

![Multi Filter](https://www.ag-grid.com/_astro/multi-filter.DGQI2KU6.png)

## Enabling the Multi Filter

#### Multi Filter

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  IMultiFilterParams,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { MultiFilterModule, SetFilterModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  MultiFilterModule,
  SetFilterModule,
  TextFilterModule,
  NumberFilterModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "athlete", filter: "agMultiColumnFilter" },
    {
      field: "country",
      filter: "agMultiColumnFilter",
      filterParams: {
        filters: [
          {
            filter: "agTextColumnFilter",
          },
          {
            filter: "agSetColumnFilter",
          },
        ],
      } as IMultiFilterParams,
    },
    {
      field: "year",
      filter: "agMultiColumnFilter",
      filterParams: {
        filters: [
          {
            filter: "agNumberColumnFilter",
          },
          {
            filter: "agSetColumnFilter",
          },
        ],
      } as IMultiFilterParams,
    },
    {
      field: "age",
      filter: "agMultiColumnFilter",
      filterParams: {
        filters: [
          {
            filter: "agNumberColumnFilter",
          },
          {
            filter: "agSetColumnFilter",
          },
        ],
      } as IMultiFilterParams,
    },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 200,
  },
};

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: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

[Live example: Multi Filter](https://www.ag-grid.com/examples/filter-multi/multi-filter/typescript)

To use a Multi Filter, specify the following in your Column Definition:

```js
const gridOptions = {
    columnDefs: [
        // use the Multi Filter with default Text Filter and Set Filter
        { field: 'athlete', filter: 'agMultiColumnFilter' },
        // use the Multi Filter with Number Filter and Set Filter
        {
            field: 'year',
            filter: 'agMultiColumnFilter',
            filterParams: {
                filters: [
                    {
                        filter: 'agNumberColumnFilter',
                    },
                    {
                        filter: 'agSetColumnFilter',
                    },
                ],
            },
        },
    ],

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

By default the Multi Filter will show a [Text Filter](https://www.ag-grid.com/javascript-data-grid/filter-text/) and [Set Filter](https://www.ag-grid.com/javascript-data-grid/filter-set/), but you can specify which filters you would like to use in the `filters` array. The filters will be displayed in the same order as they are specified.

The example above shows the Multi Filter in action. Note the following:

- The **Athlete** column has a Multi Filter with default behaviour.
- The **Country** column has a Multi Filter with the child filters configured explicitly to match the default behaviour.
- The **Year** and **Age** columns have Multi Filters with the child filters configured explicitly to use the [Number Filter](https://www.ag-grid.com/javascript-data-grid/filter-number/) with the Set Filter.

## Passing Parameters to Child Filters

Parameters can be passed to child filters by specifying `filterParams` within the `filters` array of the Multi Filter params:

```js
const gridOptions = {
    columnDefs: [
        {
            field: 'athlete',
            filter: 'agMultiColumnFilter',
            filterParams: {
                filters: [
                    {
                        filter: 'agTextColumnFilter',
                        // pass params to child filter
                        filterParams: {
                            defaultOption: 'startsWith',
                        },
                    },
                    {
                        filter: 'agSetColumnFilter',
                    },
                ],
            },
        },
    ],

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

The example below demonstrates passing parameters to child filters:

- The Text Filter in the **Athlete** column has a different default option (`'startsWith'`).
- The [Date Filter](https://www.ag-grid.com/javascript-data-grid/filter-date/) in the **Date** column has a custom comparator to compare dates correctly.
- The Set Filter in the **Date** column has a custom comparator, so the values are displayed in ascending order.

#### Multi Filter Child Params

```ts
import {
  ClientSideRowModelModule,
  DateFilterModule,
  GridApi,
  GridOptions,
  IDateFilterParams,
  IMultiFilterParams,
  ISetFilterParams,
  ITextFilterParams,
  ModuleRegistry,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { MultiFilterModule, SetFilterModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  MultiFilterModule,
  SetFilterModule,
  TextFilterModule,
  DateFilterModule,
]);

const dateFilterParams: IMultiFilterParams = {
  filters: [
    {
      filter: "agDateColumnFilter",
      filterParams: {
        comparator: (filterDate: Date, cellValue: string) => {
          if (cellValue == null) return -1;

          return getDate(cellValue).getTime() - filterDate.getTime();
        },
      } as IDateFilterParams,
    },
    {
      filter: "agSetColumnFilter",
      filterParams: {
        comparator: (a: string, b: string) => {
          return getDate(a).getTime() - getDate(b).getTime();
        },
      } as ISetFilterParams,
    },
  ],
};

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    {
      field: "athlete",
      filter: "agMultiColumnFilter",
      filterParams: {
        filters: [
          {
            filter: "agTextColumnFilter",
            filterParams: {
              defaultOption: "startsWith",
            } as ITextFilterParams,
          },
          {
            filter: "agSetColumnFilter",
          },
        ],
      } as IMultiFilterParams,
    },
    {
      field: "date",
      filter: "agMultiColumnFilter",
      filterParams: dateFilterParams,
    },
    { field: "country", filter: "agMultiColumnFilter" },
    { field: "sport", filter: "agMultiColumnFilter" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 200,
  },
};

function getDate(value: string): Date {
  const dateParts = value.split("/");
  return new Date(
    Number(dateParts[2]),
    Number(dateParts[1]) - 1,
    Number(dateParts[0]),
  );
}

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: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

[Live example: Multi Filter Child Params](https://www.ag-grid.com/examples/filter-multi/multi-filter-child-params/typescript)

## Floating Filters

When [Floating Filters](https://www.ag-grid.com/javascript-data-grid/floating-filters/) are used, the Floating Filter shown is for the child filter in the Multi Filter that was most recently applied and is still active. If no child filters are active, the Floating Filter for the first child filter in the Multi Filter is shown instead.

The example below shows Floating Filters enabled for all columns. Note how the Floating Filters change when you apply different child filters from the Multi Filter.

#### Floating Filters

```ts
import {
  ClientSideRowModelModule,
  DateFilterModule,
  GridApi,
  GridOptions,
  IDateFilterParams,
  IMultiFilterParams,
  ISetFilterParams,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  MultiFilterModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  MultiFilterModule,
  SetFilterModule,
  NumberFilterModule,
  DateFilterModule,
  TextFilterModule,
]);

const dateFilterParams: IMultiFilterParams = {
  filters: [
    {
      filter: "agDateColumnFilter",
      filterParams: {
        comparator: (filterDate: Date, cellValue: string) => {
          if (cellValue == null) return -1;

          return getDate(cellValue).getTime() - filterDate.getTime();
        },
      } as IDateFilterParams,
    },
    {
      filter: "agSetColumnFilter",
      filterParams: {
        comparator: (a: string, b: string) => {
          return getDate(a).getTime() - getDate(b).getTime();
        },
      } as ISetFilterParams,
    },
  ],
};

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "athlete", filter: "agMultiColumnFilter" },
    {
      field: "gold",
      filter: "agMultiColumnFilter",
      filterParams: {
        filters: [
          {
            filter: "agNumberColumnFilter",
          },
          {
            filter: "agSetColumnFilter",
          },
        ],
      } as IMultiFilterParams,
    },
    {
      field: "date",
      filter: "agMultiColumnFilter",
      filterParams: dateFilterParams,
    },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 200,
    floatingFilter: true,
    suppressHeaderMenuButton: true,
    suppressHeaderContextMenu: true,
  },
};

function getDate(value: string) {
  const dateParts = value.split("/");
  return new Date(
    Number(dateParts[2]),
    Number(dateParts[1]) - 1,
    Number(dateParts[0]),
  );
}

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: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

[Live example: Floating Filters](https://www.ag-grid.com/examples/filter-multi/floating-filters/typescript)

## Display Style

By default, all filters in the Multi Filter are shown inline in the same view, so that the user has easy, immediate access. However, you can change how filters are presented, by either using sub-menus or accordions to wrap each filter. To do this, you can set `display` to the style of how you would like a particular filter to be displayed:

```js
const gridOptions = {
    columnDefs: [
        {
            field: 'athlete',
            filter: 'agMultiColumnFilter',
            filterParams: {
                filters: [
                    {
                        filter: 'agTextColumnFilter',
                        display: 'subMenu',
                    },
                    {
                        filter: 'agSetColumnFilter',
                    }
                ]
            }
        }
    ],

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

The options for `display` are `'inline'`, `'subMenu'` or `'accordion'`.

Please note that sub-menus will be shown as accordions in the Tool Panel.

You can also provide a title that will be used in the menu item or accordion title by using the `title` property.

The following example demonstrates the different display styles.

- The **Athlete** column demonstrates having the first filter inside a sub-menu.
- The sub-menu for the **Athlete** filter is shown as an accordion inside the Tool Panel.
- The **Country** column demonstrates having both filters as accordions.
- A custom title is used for the first filter in the **Country** column.
- The **Sport** column shows the default behaviour, where all filters are inline.

#### Display Style

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  IMultiFilterParams,
  ModuleRegistry,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  FiltersToolPanelModule,
  MultiFilterModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ClipboardModule,
  FiltersToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  MultiFilterModule,
  SetFilterModule,
  TextFilterModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    {
      field: "athlete",
      filter: "agMultiColumnFilter",
      filterParams: {
        filters: [
          {
            filter: "agTextColumnFilter",
            display: "subMenu",
          },
          {
            filter: "agSetColumnFilter",
          },
        ],
      } as IMultiFilterParams,
    },
    {
      field: "country",
      filter: "agMultiColumnFilter",
      filterParams: {
        filters: [
          {
            filter: "agTextColumnFilter",
            display: "accordion",
            title: "Expand Me for Text Filters",
          },
          {
            filter: "agSetColumnFilter",
            display: "accordion",
          },
        ],
      } as IMultiFilterParams,
    },
    {
      field: "sport",
      filter: "agMultiColumnFilter",
    },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 200,
    suppressHeaderMenuButton: true,
    suppressHeaderContextMenu: true,
  },
  sideBar: {
    toolPanels: [
      {
        id: "filters",
        labelDefault: "Filters",
        labelKey: "filters",
        iconKey: "filter",
        toolPanel: "agFiltersToolPanel",
      },
    ],
  },
};

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: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

[Live example: Display Style](https://www.ag-grid.com/examples/filter-multi/display-style/typescript)

## Custom Filters

You can use your own [Custom Filters](https://www.ag-grid.com/javascript-data-grid/component-filter/) with the Multi Filter.

The example below shows a Custom Filter in use on the **Year** column, used alongside the grid-provided [Number Filter](https://www.ag-grid.com/javascript-data-grid/filter-number/).

#### Custom Filters

```ts
import {
  ClientSideRowModelModule,
  DoesFilterPassParams,
  GridApi,
  GridOptions,
  IMultiFilterParams,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  FiltersToolPanelModule,
  MultiFilterModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { YearFilter } from "./YearFilter";
import { YearFloatingFilter } from "./YearFloatingFilter";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ClipboardModule,
  FiltersToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  MultiFilterModule,
  SetFilterModule,
  NumberFilterModule,
  TextFilterModule,
]);

let gridApi: GridApi<IOlympicData>;

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

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "athlete", filter: "agMultiColumnFilter" },
    { field: "sport", filter: "agMultiColumnFilter" },
    {
      field: "year",
      filter: "agMultiColumnFilter",
      filterParams: {
        filters: [
          {
            filter: { component: YearFilter, doesFilterPass: doesFilterPass },
            floatingFilterComponent: YearFloatingFilter,
          },
          {
            filter: "agNumberColumnFilter",
          },
        ],
      } as IMultiFilterParams,
    },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 200,
    floatingFilter: true,
    suppressHeaderMenuButton: true,
    suppressHeaderContextMenu: true,
  },
  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: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

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

## Applying Multi Filters

Similar to [Applying Provided Filters](https://www.ag-grid.com/javascript-data-grid/filter-applying/), the Multi Filter can have buttons that will control all the child filters together.

To configure buttons for the Multi Filter, first enable the grid option `enableFilterHandlers`. Note that if you have custom filter components, these will need to have been written to [Support Filter Handlers](https://www.ag-grid.com/javascript-data-grid/component-filter/#implementing-a-filter-component).

Note that when `enableFilterHandlers = true`, buttons can only be set against the parent Multi Filter parameters; they cannot be set against the individual child filters.

The following options can be specified on the `filterParams`:

| 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. |

#### Applying Multi Filters

```ts
import {
  ClientSideRowModelModule,
  FilterWrapperParams,
  GridApi,
  GridOptions,
  IMultiFilterParams,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { MultiFilterModule, SetFilterModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  MultiFilterModule,
  SetFilterModule,
  TextFilterModule,
  NumberFilterModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "athlete", filter: "agMultiColumnFilter" },
    {
      field: "country",
      filter: "agMultiColumnFilter",
      filterParams: {
        filters: [
          {
            filter: "agTextColumnFilter",
          },
          {
            filter: "agSetColumnFilter",
          },
        ],
      } as IMultiFilterParams,
    },
    {
      field: "year",
      filter: "agMultiColumnFilter",
      filterParams: {
        filters: [
          {
            filter: "agNumberColumnFilter",
          },
          {
            filter: "agSetColumnFilter",
          },
        ],
      } as IMultiFilterParams,
    },
    {
      field: "age",
      filter: "agMultiColumnFilter",
      filterParams: {
        filters: [
          {
            filter: "agNumberColumnFilter",
          },
          {
            filter: "agSetColumnFilter",
          },
        ],
      } as IMultiFilterParams,
    },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 200,
    filterParams: {
      buttons: ["apply", "cancel"],
    } as FilterWrapperParams,
  },
  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: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

[Live example: Applying Multi Filters](https://www.ag-grid.com/examples/filter-multi/applying-multi-filters/typescript)

## Multi Filter Model

The model for the Multi Filter wraps the models for all the child filters inside it. It has the `IMultiFilterModel` interface:

Properties available on the `IMultiFilterModel` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `filterType` | `'multi'` |  |  | Multi filter type. |
| `filterModels` | `any[] \| null` |  |  | Child filter models in the same order as the filters are specified in `filterParams`. |

The `filterType` will always be set to `'multi'`. The models array is the same length as the number of child filters, containing the models for the child filters in the same order as the filters were specified in the `filterParams`. Each array entry will either be set to `null` if the corresponding child filter is not active, or to the current model for the child filter if it is active.

For example, if the Multi Filter has the default Text Filter and Set Filter, and the Set Filter is active, the Multi Filter model might look something like this:

```
const filterModel = {
    filterType: 'multi',
    filterModels: [
        null,
        { filterType: 'set', values: ['A', 'B', 'C'] }
    ]
}
```

The example below allows you to see the Multi Filter Model in use. You can print the current filter state to the console and save/restore it using the buttons at the top of the grid

#### Multi Filter Model

```ts
import {
  ClientSideRowModelModule,
  DateFilterModule,
  GridApi,
  GridOptions,
  IDateFilterParams,
  IMultiFilterParams,
  ISetFilterParams,
  ITextFilterParams,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  MultiFilterModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  MultiFilterModule,
  SetFilterModule,
  TextFilterModule,
  NumberFilterModule,
  DateFilterModule,
]);

const dateFilterParams: IMultiFilterParams = {
  filters: [
    {
      filter: "agDateColumnFilter",
      filterParams: {
        comparator: (filterDate: Date, cellValue: string) => {
          if (cellValue == null) return -1;

          return getDate(cellValue).getTime() - filterDate.getTime();
        },
      } as IDateFilterParams,
    },
    {
      filter: "agSetColumnFilter",
      filterParams: {
        comparator: (a: string, b: string) => {
          return getDate(a).getTime() - getDate(b).getTime();
        },
      } as ISetFilterParams,
    },
  ],
};

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "athlete", filter: "agMultiColumnFilter" },
    {
      field: "country",
      filter: "agMultiColumnFilter",
      filterParams: {
        filters: [
          {
            filter: "agTextColumnFilter",
            filterParams: {
              defaultOption: "startsWith",
            } as ITextFilterParams,
          },
          {
            filter: "agSetColumnFilter",
          },
        ],
      } as IMultiFilterParams,
    },
    {
      field: "gold",
      filter: "agMultiColumnFilter",
      filterParams: {
        filters: [
          {
            filter: "agNumberColumnFilter",
          },
          {
            filter: "agSetColumnFilter",
          },
        ],
      } as IMultiFilterParams,
    },
    {
      field: "date",
      filter: "agMultiColumnFilter",
      filterParams: dateFilterParams,
    },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 200,
    suppressHeaderMenuButton: true,
    suppressHeaderContextMenu: true,
  },
};

function getDate(value: string) {
  const dateParts = value.split("/");
  return new Date(
    Number(dateParts[2]),
    Number(dateParts[1]) - 1,
    Number(dateParts[0]),
  );
}

let savedFilterState: Record<string, any>;

function printState() {
  const filterState = gridApi!.getFilterModel();
  console.log("Current filter state: ", filterState);
}

function saveState() {
  savedFilterState = gridApi!.getFilterModel();
  console.log("Filter state saved");
}

function restoreState() {
  gridApi!.setFilterModel(savedFilterState);
  console.log("Filter state restored");
}

function resetState() {
  gridApi!.setFilterModel(null);
  console.log("Filter state reset");
}

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: IOlympicData[]) => gridApi!.setGridOption("rowData", data));

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

[Live example: Multi Filter Model](https://www.ag-grid.com/examples/filter-multi/multi-filter-model/typescript)

## Accessing Child Filters

The Multi Filter acts as a wrapper around a list of child filters inside it. The order of the filters is the same order as they are specified in the `filters` array in the `filterParams`. If you want to interact with the individual child filters, you can retrieve a particular child filter instance from the Multi Filter by calling `getChildFilterInstance(index)`, where `index` is the same as the index in the `filters` array. You can then call any API methods that are available on that particular child filter instance.

The example below shows how you can access child filter instances and call methods on them:

- Clicking the **Print Set Filter search text** button will access the Set Filter inside the Multi Filter and print the current search text to the console.

#### Accessing Child Filters

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  IMultiFilter,
  IMultiFilterParams,
  ITextFilterParams,
  ModuleRegistry,
  SetFilterUi,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  MultiFilterModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  MultiFilterModule,
  SetFilterModule,
  TextFilterModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    {
      field: "athlete",
      filter: "agMultiColumnFilter",
      filterParams: {
        filters: [
          {
            filter: "agTextColumnFilter",
            filterParams: {
              buttons: ["apply", "clear"],
            } as ITextFilterParams,
          },
          {
            filter: "agSetColumnFilter",
          },
        ],
      } as IMultiFilterParams,
    },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 200,
    suppressHeaderMenuButton: true,
    suppressHeaderContextMenu: true,
  },
};

function getSetMiniFilter() {
  gridApi!
    .getColumnFilterInstance<IMultiFilter>("athlete")
    .then((multiFilterInstance) => {
      const setFilter =
        multiFilterInstance!.getChildFilterInstance<SetFilterUi>(1)!;
      console.log(
        "Current Set Filter search text: ",
        setFilter.getMiniFilter(),
      );
    });
}

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: IOlympicData[]) => gridApi!.setGridOption("rowData", data));

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

[Live example: Accessing Child Filters](https://www.ag-grid.com/examples/filter-multi/accessing-child-filters/typescript)

## Multi Filter Parameters

Properties available on the `IMultiFilterParams` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `filters` | `IMultiFilterDef[]` |  |  | An array of filter definition objects. |
| `readOnly` | `boolean` |  | `false` | If true, all UI inputs managed by this filter are for display only, and the filter can only be affected by API calls. Does NOT affect child filters, they need to be individually configured with `readOnly` where applicable. See [Read-only Filter UI](https://www.ag-grid.com/javascript-data-grid/filter-api/#read-only-filter-ui) for more information. |

### IMultiFilterDef

Properties available on the `IMultiFilterDef` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `display` | `'inline' \| 'accordion' \| 'subMenu'` |  | `'inline'` | Configures how the filter is shown in the Multi Filter. See [Display Style](https://www.ag-grid.com/javascript-data-grid/filter-multi/#display-style) for more information. |
| `title` | `string` |  |  | The title to be used when a filter is displayed inside a sub-menu or accordion. |
| `filter` | `IFilterType \| ColumnFilter` |  |  | Child filter component to use inside the Multi Filter. |
| `filterParams` | `any` |  |  | Custom parameters to be passed to the child filter component. |
| `floatingFilterComponent` | `IFloatingFilterType` |  |  | Floating filter component to use for the child filter. |
| `floatingFilterComponentParams` | `any` |  |  | Custom parameters to be passed to the floating filter component. |
| `filterValueGetter` | `string \| ValueGetterFunc` |  |  | Function or expression. Gets the value for filtering purposes. Allows for different values to be used for child filters instead of using `colDef.filterValueGetter`. |

## Multi Filter API

Properties available on the `IMultiFilterComp` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `isFilterActive` | `Function` |  |  | Returns `true` if the filter is currently active, otherwise `false`. |
| `getModel` | `Function` |  |  | Returns a model representing the current state of the filter, or `null` if the filter is not active. |
| `setModel` | `Function` |  |  | Sets the state of the child filters using the supplied models. Providing `null` will de-activate all child filters. **Note:** if you are providing values asynchronously to a child Set Filter, you need to wait for these changes to be applied before performing any further actions by waiting on the returned grid promise, e.g. `filter.setModel([null, { values: ['a', 'b'] }]).then(function() { gridApi.onFilterChanged(); });` See [Set Filter Asynchronous Values](https://www.ag-grid.com/javascript-data-grid/filter-set-filter-list/#asynchronous-values) for more information. |
| `getChildFilterInstance` | `Function` |  |  | Returns the child filter instance at the specified index or `undefined` for an invalid index. See [Accessing Child Filters](https://www.ag-grid.com/javascript-data-grid/filter-multi/#accessing-child-filters) for more information. |