---
product: "AG Grid"
title: "Advanced Filter - Filter Model / API"
description: "The state of the Advanced Filter can be read as an Advanced Filter Model, and applied again later by setting that model back. This allows the filter to be saved and restored, for example across page reloads or between users, or to be set programmatically without typing an expression."
enterprise: true
framework: react
version: "36.2.0"
related:
    - title: "Columns & Filter Options"
      url: "https://www.ag-grid.com/archive/36.2.0/react-data-grid/filter-advanced-columns/"
    - title: "Input & Builder"
      url: "https://www.ag-grid.com/archive/36.2.0/react-data-grid/filter-advanced-input-builder/"
    - title: "Custom Filter Options"
      url: "https://www.ag-grid.com/archive/36.2.0/react-data-grid/filter-advanced-custom-filter-options/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Advanced Filter - Filter Model / API

The state of the Advanced Filter can be read as an Advanced Filter Model, and applied again later by setting that model back. This allows the filter to be saved and restored, for example across page reloads or between users, or to be set programmatically without typing an expression.

## Advanced Filter Model

The Advanced Filter model describes the current state of the Advanced Filter. This is represented by an `AdvancedFilterModel`, which is either a `ColumnAdvancedFilterModel` for a single condition, or a `JoinAdvancedFilterModel` for multiple conditions:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `filterType` | `'join'` |  |  |  |
| `type` | `'AND' \| 'OR'` |  |  |  |
| `conditions` | `AdvancedFilterModel[]` |  |  |  |

For example, the following Advanced Filter would be represented by the following model:

`([Age] > 23 OR [Sport] ends with "ing") AND [Country] is any of ["Australia", "Italy"]`

```js
const advancedFilterModel = {
    filterType: 'join',
    type: 'AND',
    conditions: [
      {
        filterType: 'join',
        type: 'OR',
        conditions: [
          {
            filterType: 'number',
            colId: 'age',
            type: 'greaterThan',
            filter: 23,
          },
          {
            filterType: 'text',
            colId: 'sport',
            type: 'endsWith',
            filter: 'ing',
          }
        ]
      },
      {
        filterType: 'set',
        colId: 'country',
        type: 'isAnyOf',
        values: ['Australia', 'Italy'],
      }
    ]
};
```

A condition using a [Custom Filter Option](https://www.ag-grid.com/archive/36.2.0/react-data-grid/filter-advanced-custom-filter-options/#filter-model) stores the option's `displayKey` in `type`.

## Saving and Restoring the Advanced Filter

The Advanced Filter Model can be retrieved via the API method `getAdvancedFilterModel`, and set via the API method `setAdvancedFilterModel`.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `getAdvancedFilterModel` | `Function` |  |  |  |
| `setAdvancedFilterModel` | `Function` |  |  |  |

> **Note**
>
> The Advanced Filter Model can be saved and restored as part of [Grid State](https://www.ag-grid.com/archive/36.2.0/react-data-grid/grid-state/).

The Advanced Filter Model and API methods are demonstrated in the following example:

- Clicking `Save Advanced Filter Model` will save the current Advanced Filter.
- Clicking `Restore Saved Advanced Filter Model` will restore the previously saved Advanced Filter.
- Clicking `Set Custom Advanced Filter Model` will set `[Gold] >= 1`.
- Clicking `Clear Advanced Filter` will clear the current Advanced Filter.

#### Advanced Filter Model / API

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import "./styles.css";
import {
  AdvancedFilterModel,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridState,
  GridStateModule,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  AdvancedFilterModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";

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

const modules = [
  TextFilterModule,
  NumberFilterModule,
  GridStateModule,
  AdvancedFilterModule,
  ClientSideRowModelModule,
  ColumnMenuModule,
  ContextMenuModule,
];

const initialAdvancedFilterModel: AdvancedFilterModel = {
  filterType: "join",
  type: "AND",
  conditions: [
    {
      filterType: "join",
      type: "OR",
      conditions: [
        {
          filterType: "number",
          colId: "age",
          type: "greaterThan",
          filter: 23,
        },
        {
          filterType: "text",
          colId: "sport",
          type: "endsWith",
          filter: "ing",
        },
      ],
    },
    {
      filterType: "text",
      colId: "country",
      type: "contains",
      filter: "united",
    },
  ],
};

let savedFilterModel: AdvancedFilterModel | null = null;

const GridExample = () => {
  const gridRef = useRef<AgGridReact<IOlympicData>>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);

  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete" },
    { field: "country" },
    { field: "sport" },
    { field: "age", minWidth: 100 },
    { field: "gold", minWidth: 100 },
    { field: "silver", minWidth: 100 },
    { field: "bronze", minWidth: 100 },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 180,
      filter: true,
    };
  }, []);
  const initialState = useMemo<GridState>(() => {
    return {
      filter: {
        advancedFilterModel: initialAdvancedFilterModel,
      },
    };
  }, []);

  const { data, loading } = useFetchJson<IOlympicData>(
    "https://www.ag-grid.com/example-assets/olympic-winners.json",
  );

  const saveFilterModel = useCallback(() => {
    savedFilterModel = gridRef.current!.api.getAdvancedFilterModel();
  }, []);

  const restoreFilterModel = useCallback(() => {
    gridRef.current!.api.setAdvancedFilterModel(savedFilterModel);
  }, [savedFilterModel]);

  const restoreFromHardCoded = useCallback(() => {
    gridRef.current!.api.setAdvancedFilterModel({
      filterType: "number",
      colId: "gold",
      type: "greaterThanOrEqual",
      filter: 1,
    });
  }, []);

  const clearFilter = useCallback(() => {
    gridRef.current!.api.setAdvancedFilterModel(null);
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="example-wrapper">
          <div>
            <div className="button-group">
              <button onClick={saveFilterModel}>
                Save Advanced Filter Model
              </button>
              <button onClick={restoreFilterModel}>
                Restore Saved Advanced Filter Model
              </button>
              <button onClick={restoreFromHardCoded} title="[Gold] >= 1">
                Set Custom Advanced Filter Model
              </button>
              <button onClick={clearFilter}>Clear Advanced Filter</button>
            </div>
          </div>

          <div style={gridStyle}>
            <AgGridReact<IOlympicData>
              ref={gridRef}
              rowData={data}
              loading={loading}
              columnDefs={columnDefs}
              defaultColDef={defaultColDef}
              enableAdvancedFilter={true}
              initialState={initialState}
            />
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

[Live example: Advanced Filter Model / API](https://www.ag-grid.com/archive/36.2.0/examples/filter-advanced-api/advanced-filter-model-api/reactFunctionalTs/)