---
title: "Advanced Filter"
enterprise: true
framework: vue
version: "36.1.0"
---

# Advanced Filter

The Advanced Filter allows for complex filter conditions to be entered across columns in a single type-ahead input, as well as within a hierarchical visual builder.

## Enabling Advanced Filter

The Advanced Filter is enabled by setting the property `enableAdvancedFilter = true`. By default, the Advanced Filter is displayed between the column headers and the grid rows, where the [Floating Filters](https://www.ag-grid.com/vue-data-grid/floating-filters/) would be displayed if they were enabled.

```ts
<ag-grid-vue
    :enableAdvancedFilter="enableAdvancedFilter"
    /* other grid options ... */>
</ag-grid-vue>

this.enableAdvancedFilter = true;
```

The following example demonstrates the Advanced Filter:

- Start typing `athlete` into the Advanced Filter input. As you type, the list of suggested column names will be filtered down.
- Select the `Athlete` entry by pressing `↵ Enter` or `⇥ Tab`, or using the mouse to click on the entry.
- Select the `contains` entry in a similar way.
- After the quote, type `michael` followed by an end quote (`"`).
- Press `↵ Enter` or click the `Apply` button to execute the filter.
- The rows are now filtered to contain only **Athlete**s with names containing `michael`.
- Try out each of the columns to see how the different [Cell Data Types](https://www.ag-grid.com/vue-data-grid/cell-data-types/) are handled.
- Complex filter expressions can be built up by using `AND` and `OR` along with brackets - `(` and `)`.

#### Advanced Filter

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  DataTypeDefinitions,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  AdvancedFilterModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  AdvancedFilterModule,
  ClientSideRowModelModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

interface IOlympicDataTypes extends IOlympicData {
  dateObject: Date;
  hasGold: boolean;
  dateTime: Date;
  dateTimeString: string;
  countryObject: {
    name: string;
  };
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :dataTypeDefinitions="dataTypeDefinitions"
      :enableAdvancedFilter="true"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicDataTypes> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete" },
      { field: "age", minWidth: 100 },
      { field: "hasGold", minWidth: 100, headerName: "Gold" },
      { field: "dateObject", headerName: "Date" },
      { field: "date", headerName: "Date (String)" },
      {
        field: "dateTime",
        headerName: "DateTime",
        cellDataType: "dateTime",
        minWidth: 250,
      },
      {
        field: "dateTimeString",
        headerName: "DateTime (String)",
        minWidth: 250,
      },
      { field: "countryObject", headerName: "Country" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 180,
      filter: true,
    });
    const dataTypeDefinitions = ref<DataTypeDefinitions>({
      object: {
        baseDataType: "object",
        extendsDataType: "object",
        valueParser: (params) => ({ name: params.newValue }),
        valueFormatter: (params) =>
          params.value == null ? "" : params.value.name,
      },
    });
    const rowData = ref<IOlympicDataTypes[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) =>
        (rowData.value = data.map((rowData) => {
          const dateParts = rowData.date.split("/");
          const [year, month, day] = dateParts
            .reverse()
            .map((e) => parseInt(e, 10));
          const [h, m, s] = [
            Math.floor(window.agRandom() * 24),
            Math.floor(window.agRandom() * 60),
            Math.floor(window.agRandom() * 60),
          ];
          const paddedDateTimeStrings = [month, day, h, m, s].map((e) =>
            e.toString().padStart(2, "0"),
          );
          const dateString = `${year}-${paddedDateTimeStrings[0]}-${paddedDateTimeStrings[1]}`;
          const dateTimeString = `${year}-${paddedDateTimeStrings[0]}-${paddedDateTimeStrings[1]}T${paddedDateTimeStrings.slice(2).join(":")}`;
          return {
            ...rowData,
            date: dateString,
            dateObject: new Date(year, month - 1, day),
            dateTimeString,
            dateTime: new Date(year, month - 1, day, h, m, s),
            countryObject: {
              name: rowData.country,
            },
            hasGold: rowData.gold > 0,
          };
        }));

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      dataTypeDefinitions,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Advanced Filter](https://www.ag-grid.com/examples/filter-advanced/advanced-filter/vue3)

> **Note**
>
> Advanced Filter and Column Filters cannot be active at the same time. Enabling Advanced Filter will disable Column Filters.

## Advanced Filter Builder

As well as typing into the Advanced Filter input, Advanced Filters can also be set by using the Advanced Filter Builder. This displays a hierarchical view of the filter, and allows the different filter parts to be set using dropdowns and inputs. It also allows for filter conditions to be added, deleted and reordered.

The Advanced Filter Builder can be launched by clicking the `Builder` button next to the Advanced Filter input.

The following example demonstrates the Advanced Filter Builder:

- Click on any of the dropdown pills to change the join operators, columns and filter options.
- Click on the value pills to change the filter values.
- Use the drag handles to move the filter conditions or groups around.
- Use the add and remove buttons to create new conditions or delete existing ones.
- If the filter is valid (and does not match the already applied filter), click the `Apply` button to apply the filter.

#### Advanced Filter Builder

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AdvancedFilterModel,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  GridState,
  GridStateModule,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  AdvancedFilterModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  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",
    },
  ],
};

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :enableAdvancedFilter="true"
      :initialState="initialState"
      :rowData="rowData"
      @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<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 = ref<ColDef>({
      flex: 1,
      minWidth: 180,
      filter: true,
    });
    const initialState = ref<GridState>({
      filter: {
        advancedFilterModel: initialAdvancedFilterModel,
      },
    });
    const rowData = ref<IOlympicData[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      params.api.showAdvancedFilterBuilder();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      initialState,
      rowData,
      onGridReady,
      onFirstDataRendered,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Advanced Filter Builder](https://www.ag-grid.com/examples/filter-advanced/advanced-filter-builder/vue3)

## Configuring Columns

For a column to appear in the Advanced Filter, it needs to have `filter: true` (or set to a non-null and non-false value).

The type of the filter options displayed is based on the [Cell Data Type](https://www.ag-grid.com/vue-data-grid/cell-data-types/) of the column.

The different properties that can be set for each column are explained in the sections below, and demonstrated in the following example:

- The **Age** column is not available in the filter as `filter = false`.
- The **Sport** column is not available in the filter by default as hidden columns are excluded.
- After clicking **Include Hidden Columns**, the **Sport** column is available in the filter.
- The **Group** column does not appear in the filter, but its underlying column - **Country** - always appears.
- The **Athlete** column has Filter Params defined, so that it only shows the `contains` option and is case sensitive.
- The **Gold**, **Silver** and **Bronze** columns in the **Medals (-)** column group have a `headerValueGetter` defined and use the `location` property to have a different name in the filter (with a `(-)` suffix).

#### Configuring Columns

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  HeaderValueGetterParams,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  ValueGetterParams,
  enableDevValidations,
} from "ag-grid-community";
import {
  AdvancedFilterModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  NumberFilterModule,
  AdvancedFilterModule,
  ClientSideRowModelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

function valueGetter(params: ValueGetterParams<IOlympicData, number>) {
  return params.data ? params.data[params.colDef.field!] * -1 : null;
}

let includeHiddenColumns = false;

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <div class="example-header">
        <button id="includeHiddenColumns" v-on:click="onIncludeHiddenColumnsToggled()">Include Hidden Columns</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :groupDefaultExpanded="groupDefaultExpanded"
        :enableAdvancedFilter="true"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<(ColDef | ColGroupDef)[]>([
      {
        field: "athlete",
        filterParams: {
          caseSensitive: true,
          filterOptions: ["contains"],
        },
      },
      { field: "country", rowGroup: true, hide: true },
      { field: "sport", hide: true },
      { field: "age", minWidth: 100, filter: false },
      {
        headerName: "Medals (+)",
        children: [
          { field: "gold", minWidth: 100 },
          { field: "silver", minWidth: 100 },
          { field: "bronze", minWidth: 100 },
        ],
      },
      {
        headerName: "Medals (-)",
        children: [
          {
            field: "gold",
            headerValueGetter: (
              params: HeaderValueGetterParams<IOlympicData, number>,
            ) => (params.location === "advancedFilter" ? "Gold (-)" : "Gold"),
            valueGetter: valueGetter,
            cellDataType: "number",
            minWidth: 100,
          },
          {
            field: "silver",
            headerValueGetter: (
              params: HeaderValueGetterParams<IOlympicData, number>,
            ) =>
              params.location === "advancedFilter" ? "Silver (-)" : "Silver",
            valueGetter: valueGetter,
            cellDataType: "number",
            minWidth: 100,
          },
          {
            field: "bronze",
            headerValueGetter: (
              params: HeaderValueGetterParams<IOlympicData, number>,
            ) =>
              params.location === "advancedFilter" ? "Bronze (-)" : "Bronze",
            valueGetter: valueGetter,
            cellDataType: "number",
            minWidth: 100,
          },
        ],
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 180,
      filter: true,
    });
    const groupDefaultExpanded = ref(1);
    const rowData = ref<IOlympicData[]>(null);

    function onIncludeHiddenColumnsToggled() {
      includeHiddenColumns = !includeHiddenColumns;
      gridApi.value!.setGridOption(
        "includeHiddenColumnsInAdvancedFilter",
        includeHiddenColumns,
      );
      document.querySelector("#includeHiddenColumns")!.textContent =
        `${includeHiddenColumns ? "Exclude" : "Include"} Hidden Columns`;
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      groupDefaultExpanded,
      rowData,
      onGridReady,
      onIncludeHiddenColumnsToggled,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Configuring Columns](https://www.ag-grid.com/examples/filter-advanced/configuring-columns/vue3)

### Including Hidden Columns

By default, hidden columns do not appear in the Advanced Filter. To make hidden columns appear, set `includeHiddenColumnsInAdvancedFilter = true`.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `includeHiddenColumnsInAdvancedFilter` | `boolean` |  | `false` | Hidden columns are excluded from the Advanced Filter by default. To include hidden columns, set to `true`. Module: [`AdvancedFilterModule`](https://www.ag-grid.com/vue-data-grid/modules/). |

### Row Grouping

When [Row Grouping](https://www.ag-grid.com/vue-data-grid/grouping/), group columns will not appear in the Advanced Filter. The underlying columns will always appear, even if hidden.

### Column Names

All column names that are enabled for filtering must be unique for the Advanced Filter to work correctly.

If columns have the same name by default (e.g. where they appear within different column groups), the name by which they appear in the Advanced Filter can be configured using a [Header Value Getter](https://www.ag-grid.com/vue-data-grid/value-getters/#header-value-getters) and checking for `location === 'advancedFilter'`.

```ts
<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    {
        field: 'gold',
        headerValueGetter: params => params.location === 'advancedFilter' ? 'Gold 1' : 'Gold',
    },
    {
        field: 'gold',
        headerValueGetter: params => params.location === 'advancedFilter' ? 'Gold 2' : 'Gold',
    },
];
```

### Filter Parameters

Certain properties can be set by using `colDef.filterParams`.

```ts
<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    {
        field: 'athlete',
        filterParams: {
            // perform case sensitive search
            caseSensitive: true,
            // limit options to `contains` only
            filterOptions: ['contains'],
        }
    }
];
```

For all [Cell Data Types](https://www.ag-grid.com/vue-data-grid/cell-data-types/), the available filter options can be set via `filterOptions`.

The available options are as follows:

| Option Name | Option Key | Cell Data Type |
| --- | --- | --- |
| contains | `contains` | `text`, `object` |
| does not contain | `notContains` | `text`, `object` |
| equals | `equals` | `text`, `object` |
| = | `equals` | `number`, `date`, `dateString`, `dateTime`, `dateTimeString` |
| not equal | `notEqual` | `text`, `object` |
| != | `notEqual` | `number`, `date`, `dateString`, `dateTime`, `dateTimeString` |
| begins with | `startsWith` | `text`, `object` |
| ends with | `endsWith` | `text`, `object` |
| is blank | `blank` | `text`, `number`, `boolean`, `date`, `dateString`, `dateTime`, `dateTimeString`, `object` |
| is not blank | `notBlank` | `text`, `number`, `boolean`, `date`, `dateString`, `dateTime`, `dateTimeString`, `object` |
| > | `greaterThan` | `number`, `date`, `dateString`, `dateTime`, `dateTimeString` |
| >= | `greaterThanOrEqual` | `number`, `date`, `dateString`, `dateTime`, `dateTimeString` |
| < | `lessThan` | `number`, `date`, `dateString`, `dateTime`, `dateTimeString` |
| <= | `lessThanOrEqual` | `number`, `date`, `dateString`, `dateTime`, `dateTimeString` |
| is true | `true` | `boolean` |
| is false | `false` | `boolean` |

For `text` and `object` Cell Data Types, `caseSensitive = true` can be set to enable case sensitivity.

For `number`, `date`, `dateString`, `dateTime` and `dateTimeString` Cell Data Types, the following properties can be set to include blank values for the relevant options:

- `includeBlanksInEquals = true`
- `includeBlanksInLessThan = true`
- `includeBlanksInGreaterThan = true`

These settings only apply when using the Client-Side Row Model. You need to implement support for these in your server-side filtering logic when using the Server-Side Row Model.

## Filter Model / API

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'` |  |  | 'join' |
| `type` | `'AND' \| 'OR'` |  |  | How the conditions are joined together |
| `conditions` | `AdvancedFilterModel[]` |  |  | The filter conditions that are joined by the `type` |

For example, the Advanced Filter `([Age] > 23 OR [Sport] ends with "ing") AND [Country] contains "united"` would be represented by the following model:

```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: 'text',
        colId: 'country',
        type: 'contains',
        filter: 'united',
      }
    ]
};
```

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` |  |  | Get the state of the Advanced Filter. Used for saving Advanced Filter state Module: [`AdvancedFilterModule`](https://www.ag-grid.com/vue-data-grid/modules/). |
| `setAdvancedFilterModel` | `Function` |  |  | Set the state of the Advanced Filter or used for restoring Advanced Filter state. If inferring cell data types, and row data is initially empty or yet to be set, the filter model will be applied asynchronously after row data is added. To always perform this synchronously, set `cellDataType = false` on the default column definition, or provide cell data types for every column. Module: [`AdvancedFilterModule`](https://www.ag-grid.com/vue-data-grid/modules/). |

> **Note**
>
> The Advanced Filter Model can be saved and restored as part of [Grid State](https://www.ag-grid.com/vue-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 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

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  AdvancedFilterModel,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  GridState,
  GridStateModule,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  AdvancedFilterModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  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 VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <div>
        <div class="button-group">
          <button v-on:click="saveFilterModel()">Save Advanced Filter Model</button>
          <button v-on:click="restoreFilterModel()">Restore Saved Advanced Filter Model</button>
          <button v-on:click="restoreFromHardCoded()" title="[Gold] >= 1">Set Custom Advanced Filter Model</button>
          <button v-on:click="clearFilter()">Clear Advanced Filter</button>
        </div>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :enableAdvancedFilter="true"
        :initialState="initialState"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<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 = ref<ColDef>({
      flex: 1,
      minWidth: 180,
      filter: true,
    });
    const initialState = ref<GridState>({
      filter: {
        advancedFilterModel: initialAdvancedFilterModel,
      },
    });
    const rowData = ref<IOlympicData[]>(null);

    function saveFilterModel() {
      savedFilterModel = gridApi.value!.getAdvancedFilterModel();
    }
    function restoreFilterModel() {
      gridApi.value!.setAdvancedFilterModel(savedFilterModel);
    }
    function restoreFromHardCoded() {
      gridApi.value!.setAdvancedFilterModel({
        filterType: "number",
        colId: "gold",
        type: "greaterThanOrEqual",
        filter: 1,
      });
    }
    function clearFilter() {
      gridApi.value!.setAdvancedFilterModel(null);
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      initialState,
      rowData,
      onGridReady,
      saveFilterModel,
      restoreFilterModel,
      restoreFromHardCoded,
      clearFilter,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## Configuring Advanced Filter

It is possible to customise the buttons displayed in the Advanced Filter, allowing for the use of other Filter Buttons such as Reset, Cancel and Clear.

The Advanced Filter can be configured using the `IAdvancedFilterParams` interface:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `buttons` | `FilterAction[]` |  | `['apply']` | Specifies the buttons to be shown in the Advanced Filter, in the order they should be displayed in. The options are: `'apply'`: The Apply button will apply the filter. `'clear'`: The Clear button will clear the filter input without removing the current active filter. `'reset'`: The Reset button will clear the filter and apply an empty filter. `'cancel'`: The Cancel button will discard any changes that have been made to the filter in the UI, restoring the applied model. |
| `suppressBuilderButton` | `boolean` |  | `false` | Whether to hide the Builder button to open the Advanced Filter Builder |

The params can be set via the grid option `advancedFilterParams`:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `advancedFilterParams` | `IAdvancedFilterParams` |  |  | Customise the parameters passed to the Advanced Filter Module: [`AdvancedFilterModule`](https://www.ag-grid.com/vue-data-grid/modules/). |

The following example demonstrates configuring the Advanced Filter:

- The `Builder` button has been removed, and the Advanced Filter Builder must now be opened via the API.
- The `buttons` have been configured to add the Clear and Reset buttons.

#### Configuring Advanced Filter

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AdvancedFilterModel,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  GridState,
  GridStateModule,
  IAdvancedFilterParams,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  AdvancedFilterModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  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",
    },
  ],
};

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :advancedFilterParams="advancedFilterParams"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :enableAdvancedFilter="true"
      :popupParent="popupParent"
      :initialState="initialState"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const advancedFilterParams = ref<IAdvancedFilterParams>({
      buttons: ["clear", "apply", "reset"],
      suppressBuilderButton: true,
    });
    const columnDefs = ref<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 = ref<ColDef>({
      flex: 1,
      minWidth: 180,
      filter: true,
    });
    const popupParent = ref<HTMLElement | null>(
      document.getElementById("wrapper"),
    );
    const initialState = ref<GridState>({
      filter: {
        advancedFilterModel: initialAdvancedFilterModel,
      },
    });
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      // Could also be provided via grid option `advancedFilterParent`.
      // Setting the parent removes the Advanced Filter input from the grid,
      // allowing the Advanced Filter to be edited only via the Builder, launched via the API.
      params.api.setGridOption(
        "advancedFilterParent",
        document.getElementById("advancedFilterParent"),
      );

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      advancedFilterParams,
      columnDefs,
      defaultColDef,
      popupParent,
      initialState,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Configuring Advanced Filter](https://www.ag-grid.com/examples/filter-advanced/configuring-advanced-filter/vue3)

## Advanced Filter Parent

By default the Advanced Filter is displayed underneath the Column Headers, where the Floating Filters would normally appear.

It is possible to instead display the Advanced Filter outside of the grid (such as above it). This can be done by setting the grid option `advancedFilterParent` and providing it with a DOM element to contain the filter.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `advancedFilterParent` | [`HTMLElement \| null`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) |  |  | DOM element to use as the parent for the Advanced Filter to allow it to appear outside of the grid. Set to `null` or `undefined` to appear inside the grid. Module: [`AdvancedFilterModule`](https://www.ag-grid.com/vue-data-grid/modules/). |

The [Popup Parent](https://www.ag-grid.com/vue-data-grid/context-menu/#popup-parent) must also be set to an element that contains both the Advanced Filter parent and the grid.

The following example demonstrates displaying the Advanced Filter outside of the grid:

- The Advanced Filter parent is set using an element directly above the grid.
- Popup Parent is set to the document body.

#### External Parent

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  AdvancedFilterModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  NumberFilterModule,
  AdvancedFilterModule,
  ClientSideRowModelModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div id="wrapper" class="example-wrapper">
      <div id="advancedFilterParent" class="example-header"></div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :enableAdvancedFilter="true"
        :popupParent="popupParent"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<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 = ref<ColDef>({
      flex: 1,
      minWidth: 180,
      filter: true,
    });
    const popupParent = ref<HTMLElement | null>(document.body);
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      // could also be provided via grid option `advancedFilterParent`
      params.api.setGridOption(
        "advancedFilterParent",
        document.getElementById("advancedFilterParent"),
      );

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: External Parent](https://www.ag-grid.com/examples/filter-advanced/external-parent/vue3)

## Configuring Advanced Filter Builder

The Advanced Filter Builder can be configured using the `IAdvancedFilterBuilderParams` interface:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `addSelectWidth` | `number` |  | `120` | Width in pixels of the Advanced Filter Builder add button select popup. |
| `buttons` | `FilterAction[]` |  | `['apply', 'cancel']` | Specifies the buttons to be shown in the Advanced Filter Builder, in the order they should be displayed in. The options are: `'apply'`: The Apply button will apply the filter and close the builder. `'clear'`: The Clear button will clear the filter in the builder without removing the current active filter. `'reset'`: The Reset button will clear the filter and apply an empty filter. `'cancel'`: The Cancel button will discard any changes that have been made to the filter in the UI, and close the Builder without applying any changes. |
| `minWidth` | `number` |  | `500` | Minimum width in pixels of the Advanced Filter Builder popup. |
| `pillSelectMaxWidth` | `number` |  | `200` | Max width in pixels of the Advanced Filter Builder pill select popup. |
| `pillSelectMinWidth` | `number` |  | `140` | Min width in pixels of the Advanced Filter Builder pill select popup. |
| `showMoveButtons` | `boolean` |  | `false` | Whether to show the move up and move down buttons in the Advanced Filter Builder. |
| `suppressFullScreenButton` | `boolean` |  | `false` | Whether to hide the Full Screen button in the Advanced Filter Builder. |

The params can be set via the grid option `advancedFilterBuilderParams`:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `advancedFilterBuilderParams` | `IAdvancedFilterBuilderParams` |  |  | Customise the parameters passed to the Advanced Filter Builder. Module: [`AdvancedFilterModule`](https://www.ag-grid.com/vue-data-grid/modules/). |

As well as using the button in the Advanced Filter, it's possible to launch the Advanced Filter Builder via the `showAdvancedFilterBuilder` grid API method, and hide it via `hideAdvancedFilterBuilder`:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `showAdvancedFilterBuilder` | `Function` |  |  | Open the Advanced Filter Builder dialog (if enabled). Module: [`AdvancedFilterModule`](https://www.ag-grid.com/vue-data-grid/modules/). |
| `hideAdvancedFilterBuilder` | `Function` |  |  | Closes the Advanced Filter Builder dialog (if enabled). Un-applied changes are discarded. Module: [`AdvancedFilterModule`](https://www.ag-grid.com/vue-data-grid/modules/). |

When the Advanced Filter Builder is shown or hidden, the `advancedFilterBuilderVisibleChanged` event is fired:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `advancedFilterBuilderVisibleChanged` | `AdvancedFilterBuilderVisibleChangedEvent` |  |  | Advanced Filter Builder visibility has changed (opened or closed). |

The following example demonstrates configuring the Advanced Filter Builder:

- The `Advanced Filter Builder` button displays the Advanced Filter Builder via the API method `showAdvancedFilterBuilder`.
- The `advancedFilterBuilderVisibleChanged` event is used to toggle the disabled status of the `Advanced Filter Builder` button.
- The `showMoveButtons` param is set in the `advancedFilterBuilderParams`, which displays buttons allowing the filter rows to be moved up and down (including via keyboard navigation).

#### Configuring Advanced Filter Builder

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  AdvancedFilterBuilderVisibleChangedEvent,
  AdvancedFilterModel,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  GridState,
  GridStateModule,
  IAdvancedFilterBuilderParams,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  AdvancedFilterModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  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",
    },
  ],
};

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div id="wrapper" class="example-wrapper">
      <div class="example-header">
        <div id="advancedFilterParent" class="parent"></div>
        <button id="advancedFilterBuilderButton" v-on:click="showBuilder()">Advanced Filter Builder</button>
        <i id="advancedFilterIcon" class="fa fa-filter filter-icon"></i>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :advancedFilterBuilderParams="advancedFilterBuilderParams"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :enableAdvancedFilter="true"
        :popupParent="popupParent"
        :initialState="initialState"
        :rowData="rowData"
        @advanced-filter-builder-visible-changed="onAdvancedFilterBuilderVisibleChanged"
        @filter-changed="onFilterChanged"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const advancedFilterBuilderParams = ref<IAdvancedFilterBuilderParams>({
      showMoveButtons: true,
      suppressFullScreenButton: true,
      buttons: ["clear", "apply", "cancel"],
    });
    const columnDefs = ref<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 = ref<ColDef>({
      flex: 1,
      minWidth: 180,
      filter: true,
    });
    const popupParent = ref<HTMLElement | null>(
      document.getElementById("wrapper"),
    );
    const initialState = ref<GridState>({
      filter: {
        advancedFilterModel: initialAdvancedFilterModel,
      },
    });
    const rowData = ref<IOlympicData[]>(null);

    function onAdvancedFilterBuilderVisibleChanged(
      event: AdvancedFilterBuilderVisibleChangedEvent<IOlympicData>,
    ) {
      const eButton = document.getElementById("advancedFilterBuilderButton")!;
      if (event.visible) {
        eButton.setAttribute("disabled", "");
      } else {
        eButton.removeAttribute("disabled");
      }
    }
    function onFilterChanged() {
      const advancedFilterApplied = !!gridApi.value!.getAdvancedFilterModel();
      document
        .getElementById("advancedFilterIcon")!
        .classList.toggle("filter-icon-disabled", !advancedFilterApplied);
    }
    function showBuilder() {
      gridApi.value!.showAdvancedFilterBuilder();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      // Could also be provided via grid option `advancedFilterParent`.
      // Setting the parent removes the Advanced Filter input from the grid,
      // allowing the Advanced Filter to be edited only via the Builder, launched via the API.
      params.api.setGridOption(
        "advancedFilterParent",
        document.getElementById("advancedFilterParent"),
      );

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      advancedFilterBuilderParams,
      columnDefs,
      defaultColDef,
      popupParent,
      initialState,
      rowData,
      onGridReady,
      onAdvancedFilterBuilderVisibleChanged,
      onFilterChanged,
      showBuilder,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Configuring Advanced Filter Builder](https://www.ag-grid.com/examples/filter-advanced/configuring-advanced-filter-builder/vue3)

## Cell Data Type Handling

All of the [Cell Data Types](https://www.ag-grid.com/vue-data-grid/cell-data-types/) are supported in the Advanced Filter. The behaviour of each is described below.

- **Text** - The value in the input is compared against the cell value before any [Value Formatters](https://www.ag-grid.com/vue-data-grid/value-formatters/) are applied (similar to the [Text Filter](https://www.ag-grid.com/vue-data-grid/filter-text/)). To change the value being compared against, a [Filter Value Getter](https://www.ag-grid.com/vue-data-grid/filter-text/#text-filter-values) can be used.
- **Number** - The value in the input is compared against the cell value (like in the [Number Filter](https://www.ag-grid.com/vue-data-grid/filter-number/)).
- **BigInt** - The value in the input is parsed as a `bigint` (decimal integer syntax only, optional trailing `n`) and compared against the cell value (like in the [BigInt Filter](https://www.ag-grid.com/vue-data-grid/filter-bigint/)). A column's [`bigintParser`](https://www.ag-grid.com/vue-data-grid/filter-bigint/#custom-parsing) is used here too, so custom formats such as hexadecimal are also accepted, and its `bigintFormatter` is used to display a stored operand in the filter expression and the Filter Builder.
- **Boolean** - No values are displayed for booleans as the filter option is used instead.
- **Date** and **Date Time** - The value in the input is converted to a `Date` via the [Value Parser](https://www.ag-grid.com/vue-data-grid/value-parsers/#value-parser).
- **Date String** and **Date Time String** - The value in the input is converted to a `Date` using the [Value Parser](https://www.ag-grid.com/vue-data-grid/value-parsers/#value-parser) and the [Date Parser](https://www.ag-grid.com/vue-data-grid/cell-data-types/#date-as-string). This is compared against the cell values, which are also converted using the Date Parser.
- **Object** - The value in the input is compared against the values returned by the [Filter Value Getter](https://www.ag-grid.com/vue-data-grid/column-properties/#reference-filtering-filterValueGetter) if one is provided. Otherwise, the cell values are converted using the [Value Formatter](https://www.ag-grid.com/vue-data-grid/value-formatters/).

## Aggregation / Pivoting

The Advanced Filter will only work on leaf-level rows when using [Aggregation](https://www.ag-grid.com/vue-data-grid/aggregation/). The `groupAggFiltering` property will be ignored.

When [Pivoting](https://www.ag-grid.com/vue-data-grid/pivoting/), Pivot Result Columns will not appear in the Advanced Filter. However, primary columns (including underlying group and pivot columns) will be shown in the Advanced Filter.

## Server-Side Row Model

In addition to the Client-Side Row Model, the Advanced Filter can be used with the [Server-Side Row Model](https://www.ag-grid.com/vue-data-grid/row-models/). See the [SSRM Advanced Filter Example](https://www.ag-grid.com/vue-data-grid/server-side-model-filtering/#advanced-filter) for more information.

## Localisation

If providing custom [Localisation](https://www.ag-grid.com/vue-data-grid/localisation/) values for the Advanced Filter, note that if the filter option values contain spaces, one option value cannot start with another option value.