---
product: "AG Grid"
title: "Advanced Filter"
description: "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."
enterprise: true
framework: javascript
version: "36.2.0"
related:
    - title: "Overview"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/filtering-overview/"
    - title: "Column Filters"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/filtering/"
    - title: "Custom Column Filters"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/component-filter/"
    - title: "Floating Filters"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/floating-filters/"
    - title: "Custom Floating Filters"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/component-floating-filter/"
    - title: "External Filter"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/filter-external/"
    - title: "Quick Filter"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/filter-quick/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

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

#### Advanced Filter

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  AdvancedFilterModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";

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

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

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

let gridApi: GridApi<IOlympicDataTypes>;

const gridOptions: GridOptions<IOlympicDataTypes> = {
  columnDefs: [
    { 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" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 180,
    filter: true,
  },
  dataTypeDefinitions: {
    object: {
      baseDataType: "object",
      extendsDataType: "object",
      valueParser: (params) => ({ name: params.newValue }),
      valueFormatter: (params) =>
        params.value == null ? "" : params.value.name,
    },
  },
  enableAdvancedFilter: 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: IOlympicDataTypes[]) =>
    gridApi!.setGridOption(
      "rowData",
      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,
        };
      }),
    ),
  );
```

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

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. It can instead be displayed outside of the grid by setting an [Advanced Filter Parent](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/filter-advanced-input-builder/#filter-parent). The buttons shown alongside the input can be [customised](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/filter-advanced-input-builder/#buttons).

```js
const gridOptions = {
    enableAdvancedFilter: true,
    defaultColDef: {
        // Include all columns in the Advanced Filter
        filter: true,
    },

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

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

## Advanced Filter Input

The example below 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.
- Try out each of the columns to see how the different [Cell Data Types](https://www.ag-grid.com/archive/36.2.0/javascript-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 {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  AdvancedFilterModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";

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

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

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

let gridApi: GridApi<IOlympicDataTypes>;

const gridOptions: GridOptions<IOlympicDataTypes> = {
  columnDefs: [
    { 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" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 180,
    filter: true,
  },
  dataTypeDefinitions: {
    object: {
      baseDataType: "object",
      extendsDataType: "object",
      valueParser: (params) => ({ name: params.newValue }),
      valueFormatter: (params) =>
        params.value == null ? "" : params.value.name,
    },
  },
  enableAdvancedFilter: 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: IOlympicDataTypes[]) =>
    gridApi!.setGridOption(
      "rowData",
      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,
        };
      }),
    ),
  );
```

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

## 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. It can also be shown and hidden via the API, and its options customised, as described in [Advanced Filter Builder](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/filter-advanced-input-builder/#advanced-filter-builder).

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 {
  AdvancedFilterModel,
  ClientSideRowModelModule,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridStateModule,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  AdvancedFilterModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  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 gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "athlete" },
    { field: "country" },
    { field: "sport" },
    { field: "age", minWidth: 100 },
    { field: "gold", minWidth: 100 },
    { field: "silver", minWidth: 100 },
    { field: "bronze", minWidth: 100 },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 180,
    filter: true,
  },
  enableAdvancedFilter: true,
  initialState: {
    filter: {
      advancedFilterModel: initialAdvancedFilterModel,
    },
  },
  onFirstDataRendered: (params: FirstDataRenderedEvent) => {
    params.api.showAdvancedFilterBuilder();
  },
};

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: Advanced Filter Builder](https://www.ag-grid.com/archive/36.2.0/examples/filter-advanced/advanced-filter-builder/typescript/)

## Next Steps

- [Columns & Filter Options](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/filter-advanced-columns/) - which columns appear, how they are named, the filter options each offers, and how each Cell Data Type is compared.
- [Input & Builder](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/filter-advanced-input-builder/) - configuring the Advanced Filter, its parent element and the Advanced Filter Builder.
- [Custom Filter Options](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/filter-advanced-custom-filter-options/) - offering Custom Filter Options in the Advanced Filter.
- [Filter Model / API](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/filter-advanced-api/) - reading and setting the Advanced Filter Model.
- [Server-Side Row Model](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/server-side-model-filtering/#advanced-filter) - using the Advanced Filter with the Server-Side Row Model instead of the Client-Side Row Model.