---
product: "AG Grid"
title: "Advanced Filter - Input & Builder"
description: "This section describes the grid options that configure the Advanced Filter input, where it is displayed, and the Advanced Filter Builder."
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: "Custom Filter Options"
      url: "https://www.ag-grid.com/archive/36.2.0/react-data-grid/filter-advanced-custom-filter-options/"
    - title: "Filter Model / API"
      url: "https://www.ag-grid.com/archive/36.2.0/react-data-grid/filter-advanced-api/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Advanced Filter - Input & Builder

This section describes the grid options that configure the Advanced Filter input, where it is displayed, and the Advanced Filter Builder.

## Advanced Filter Input

The buttons shown in the Advanced Filter input and the element it is displayed in can both be configured.

### Buttons

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. Configure via the grid option `advancedFilterParams` which follows the `IAdvancedFilterParams` interface:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `buttons` | `FilterAction[]` |  |  |  |
| `suppressBuilderButton` | `boolean` |  |  |  |

The following example demonstrates configuring the Advanced Filter:

- The `Builder` button has been removed via `suppressBuilderButton`. The Builder can still be opened via the [API](https://www.ag-grid.com/archive/36.2.0/react-data-grid/filter-advanced-input-builder/#launch-via-api).
- The `buttons` have been configured to add the Clear and Reset buttons.

#### Configuring Advanced Filter

```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 {
  AdvancedFilterModel,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridState,
  GridStateModule,
  IAdvancedFilterParams,
  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",
    },
  ],
};

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);

  const advancedFilterParams = useMemo<IAdvancedFilterParams>(() => {
    return {
      buttons: ["clear", "apply", "reset"],
      suppressBuilderButton: true,
    };
  }, []);
  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",
  );

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<IOlympicData>
            rowData={data}
            loading={loading}
            advancedFilterParams={advancedFilterParams}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            enableAdvancedFilter={true}
            initialState={initialState}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Configuring Advanced Filter](https://www.ag-grid.com/archive/36.2.0/examples/filter-advanced-input-builder/configuring-advanced-filter/reactFunctionalTs/)

### Filter Parent

By default the Advanced Filter is displayed underneath the Column Headers. To display the Advanced Filter outside of the grid (such as above it), set the grid option `advancedFilterParent`. The [Popup Parent](https://www.ag-grid.com/archive/36.2.0/react-data-grid/context-menu/#popup-parent) must also be set to an element that contains both the Advanced Filter parent and the grid.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `advancedFilterParent` | `HTMLElement \| null` |  |  |  |

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

```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 {
  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";
import { useFetchJson } from "./useFetchJson";

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

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

const GridExample = () => {
  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 popupParent = useMemo<HTMLElement | null>(() => {
    return document.body;
  }, []);

  const onGridReady = useCallback((params: GridReadyEvent) => {
    // could also be provided via grid option `advancedFilterParent`
    params.api.setGridOption(
      "advancedFilterParent",
      document.getElementById("advancedFilterParent"),
    );
  }, []);
  const { data, loading } = useFetchJson<IOlympicData>(
    "https://www.ag-grid.com/example-assets/olympic-winners.json",
  );

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div id="wrapper" className="example-wrapper">
          <div id="advancedFilterParent" className="example-header"></div>

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

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

[Live example: External Parent](https://www.ag-grid.com/archive/36.2.0/examples/filter-advanced-input-builder/external-parent/reactFunctionalTs/)

## Advanced Filter Builder

The Advanced Filter Builder can be configured via the grid option `advancedFilterBuilderParams` which follows the `IAdvancedFilterBuilderParams` interface:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `addSelectWidth` | `number` |  |  |  |
| `buttons` | `FilterAction[]` |  |  |  |
| `minWidth` | `number` |  |  |  |
| `pillSelectMaxWidth` | `number` |  |  |  |
| `pillSelectMinWidth` | `number` |  |  |  |
| `showMoveButtons` | `boolean` |  |  |  |
| `suppressFullScreenButton` | `boolean` |  |  |  |

### Launch via API

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` |  |  |  |
| `hideAdvancedFilterBuilder` | `Function` |  |  |  |

### Events

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

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `advancedFilterBuilderVisibleChanged` | `AdvancedFilterBuilderVisibleChangedEvent` |  |  |  |

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

```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 {
  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";
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",
    },
  ],
};

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

  const advancedFilterBuilderParams =
    useMemo<IAdvancedFilterBuilderParams>(() => {
      return {
        showMoveButtons: true,
        suppressFullScreenButton: true,
        buttons: ["clear", "apply", "cancel"],
      };
    }, []);
  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 popupParent = useMemo<HTMLElement | null>(() => {
    return document.getElementById("wrapper");
  }, []);
  const initialState = useMemo<GridState>(() => {
    return {
      filter: {
        advancedFilterModel: initialAdvancedFilterModel,
      },
    };
  }, []);

  const onGridReady = useCallback((params: GridReadyEvent) => {
    // An external parent hides the input in the grid, so the filter is edited only via the Builder.
    params.api.setGridOption(
      "advancedFilterParent",
      document.getElementById("advancedFilterParent"),
    );
  }, []);
  const { data, loading } = useFetchJson<IOlympicData>(
    "https://www.ag-grid.com/example-assets/olympic-winners.json",
  );

  const onAdvancedFilterBuilderVisibleChanged = useCallback(
    (event: AdvancedFilterBuilderVisibleChangedEvent<IOlympicData>) => {
      const eButton = document.getElementById("advancedFilterBuilderButton")!;
      if (event.visible) {
        eButton.setAttribute("disabled", "");
      } else {
        eButton.removeAttribute("disabled");
      }
    },
    [],
  );

  const onFilterChanged = useCallback(() => {
    const advancedFilterApplied =
      !!gridRef.current!.api.getAdvancedFilterModel();
    document
      .getElementById("advancedFilterIcon")!
      .classList.toggle("filter-icon-disabled", !advancedFilterApplied);
  }, []);

  const showBuilder = useCallback(() => {
    gridRef.current!.api.showAdvancedFilterBuilder();
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div id="wrapper" className="example-wrapper">
          <div className="example-header">
            <div id="advancedFilterParent" className="parent"></div>
            <button id="advancedFilterBuilderButton" onClick={showBuilder}>
              Advanced Filter Builder
            </button>
            <i id="advancedFilterIcon" className="fa fa-filter filter-icon"></i>
          </div>

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

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

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

## Localisation

If providing custom [Localisation](https://www.ag-grid.com/archive/36.2.0/react-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.