---
title: "Filters Tool Panel"
enterprise: true
framework: javascript
version: "36.1.0"
---

# Filters Tool Panel

The **Filters Tool Panel** allows accessing the grid's filters without needing to open up the column menu.

> **Note**
>
> Consider using the [New Filters Tool Panel](https://www.ag-grid.com/javascript-data-grid/tool-panel-filters-new/) instead, which provides improved UX.

The example below shows the Filters Tool Panel. The following can be noted:

- Columns Athlete, Age, Country, Year and Date appear in the Filters Tool Panel as they have filters.
- Columns Gold, Silver, Bronze and Total do not appear in the Filters Tool Panel as they have no filters.
- Clicking on a column in the Filters Tool Panel will show the filter below the column name. Clicking a second time will hide the filter again.
- Columns with filters active will have the filter icon appear beside the filter name in the tool panel.

#### Filters Tool Panel

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

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

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

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "athlete", minWidth: 200, filter: "agTextColumnFilter" },
    { field: "age" },
    { field: "country", minWidth: 200 },
    { field: "year" },
    { field: "date", minWidth: 180 },
    { field: "gold", filter: false },
    { field: "silver", filter: false },
    { field: "bronze", filter: false },
    { field: "total", filter: false },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 100,
    filter: true,
  },
  sideBar: "filters",
};

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: Filters Tool Panel](https://www.ag-grid.com/examples/tool-panel-filters/simple/typescript)

## Suppress Options

It is possible to remove items from the Filters Tool Panel. Items are suppressed by setting one or more of the following `toolPanelParams` to `true` when you are using the `agFiltersToolPanel` component:

Properties available on the `IToolPanelFiltersCompParams` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `suppressExpandAll` | `boolean` |  |  | To suppress Expand / Collapse All |
| `suppressFilterSearch` | `boolean` |  |  | To suppress the Filter Search |
| `suppressSyncLayoutWithGrid` | `boolean` |  |  | Suppress updating the layout of columns as they are rearranged in the grid |

To remove a particular column / filter from the tool panel, set the column property `suppressFiltersToolPanel` to `true`.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `suppressFiltersToolPanel` | `boolean` |  | `false` | Set to `true` if you do not want this column (filter) or group (filter group) to appear in the Filters Tool Panel. Module: [`ColumnsToolPanelModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |

The example below demonstrates the suppress options described above. Note the following:

- **Expand / Collapse All** and **Filter Search** are hidden as `suppressExpandAll` and `suppressFilterSearch` are both set to `true`.
- The date column / filter is hidden from the tool panel using: `colDef.suppressFiltersToolPanel=true`.

#### Suppress Options

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

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

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

const columnDefs: (ColDef | ColGroupDef)[] = [
  {
    groupId: "athleteGroupId",
    headerName: "Athlete",
    children: [
      {
        headerName: "Name",
        field: "athlete",
        minWidth: 200,
        filter: "agTextColumnFilter",
      },
      { field: "age" },
      {
        groupId: "competitionGroupId",
        headerName: "Competition",
        children: [
          { field: "year" },
          { field: "date", minWidth: 180, suppressFiltersToolPanel: true },
        ],
      },
      { field: "country", minWidth: 200 },
    ],
  },
  { colId: "sport", field: "sport", minWidth: 200 },
  {
    headerName: "Medals",
    children: [
      { field: "gold" },
      { field: "silver" },
      { field: "bronze" },
      { field: "total" },
    ],
  },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: columnDefs,
  defaultColDef: {
    flex: 1,
    minWidth: 100,
    filter: true,
  },
  sideBar: {
    toolPanels: [
      {
        id: "filters",
        labelDefault: "Filters",
        labelKey: "filters",
        iconKey: "filter",
        toolPanel: "agFiltersToolPanel",
        toolPanelParams: {
          suppressExpandAll: true,
          suppressFilterSearch: true,
        },
      },
    ],
    defaultToolPanel: "filters",
  },
};

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: Suppress Options](https://www.ag-grid.com/examples/tool-panel-filters/suppress-options/typescript)

## Filter Instances

The filters provided in the tool panel are the same instances as the filter in the column menu. This has the following implications:

- Configuration relating to filters equally applies when the filters appear in the tool panel.
- The filter behaves exactly as when it appears in the column menu. E.g. the Apply button will have the same meaning when used in the tool panel. Also the relationship with the Floating Filter (if active) will be the same.
- If the filter is open on the tool panel and then the user subsequently opens the column menu, the tool panel filter will be closed. Because the filter is the same filter instance, it will only appear at one location at any given time.

## Expand / Collapse Filter Groups

It is possible to expand and collapse filter groups in the Filters Tool Panel by invoking methods on the Filters Tool Panel Instance. These methods are shown below:

```ts
interface IFiltersToolPanel {
    expandFilterGroups(groupIds?: string[]): void;
    collapseFilterGroups(groupIds?: string[]): void;
    ... // other methods
}
```

The code snippet below shows how to expand and collapse filter groups using the Filters Tool Panel instance:

```js
// lookup Filters Tool Panel instance by id, in this case using the default filter instance id
const filtersToolPanel = api.getToolPanelInstance('filters');

// expands all filter groups in the Filters Tool Panel
filtersToolPanel.expandFilterGroups();

// collapses all filter groups in the Filters Tool Panel
filtersToolPanel.collapseFilterGroups();

// expands the 'athlete' and 'competition' filter groups in the Filters Tool Panel
filtersToolPanel.expandFilterGroups(['athleteGroupId', 'competitionGroupId']);

// collapses the 'competition' filter group in the Filters Tool Panel
filtersToolPanel.collapseFilters(['competitionGroupId']);
```

Notice in the snippet above that it's possible to target individual filter groups by supplying `groupId`s.

The example below demonstrates these methods in action. Note the following:

- When the grid is initialised, `collapseFilterGroups()` is invoked in the `onGridReady` callback to collapse all filter groups in the tool panel.
- Clicking **Expand Athlete & Competition** just expands the 'Athlete' and 'Competition' filter groups using: `expandFilterGroups(['athleteGroupId', 'competitionGroupId'])`.
- Clicking **Collapse Competition** just collapses the 'Competition' filter group using: `collapseFilterGroups(['competitionGroupId'])`.
- Clicking **Expand All** expands all filter groups using: `expandFilterGroups()`. Note that 'Sport' is not expanded as it is not a filter group.
- Clicking **Collapse All** collapses all filter groups using: `collapseFilterGroups()`.

#### Expand / Collapse Groups

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

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

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

const columnDefs: (ColDef | ColGroupDef)[] = [
  {
    groupId: "athleteGroupId",
    headerName: "Athlete",
    children: [
      {
        headerName: "Name",
        field: "athlete",
        minWidth: 200,
        filter: "agTextColumnFilter",
      },
      { field: "age" },
      {
        groupId: "competitionGroupId",
        headerName: "Competition",
        children: [{ field: "year" }, { field: "date", minWidth: 180 }],
      },
      { field: "country", minWidth: 200 },
    ],
  },
  { colId: "sport", field: "sport", minWidth: 200 },
  {
    headerName: "Medals",
    children: [
      { field: "gold" },
      { field: "silver" },
      { field: "bronze" },
      { field: "total" },
    ],
  },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: columnDefs,
  defaultColDef: {
    flex: 1,
    minWidth: 100,
    filter: true,
  },
  sideBar: "filters",
  onGridReady: (params) => {
    // initially collapse all filter groups
    params.api.getToolPanelInstance("filters")!.collapseFilterGroups();
  },
};

function collapseAll() {
  gridApi!.getToolPanelInstance("filters")!.collapseFilterGroups();
}

function expandAthleteAndCompetition() {
  gridApi!
    .getToolPanelInstance("filters")!
    .expandFilterGroups(["athleteGroupId", "competitionGroupId"]);
}

function collapseCompetition() {
  gridApi!
    .getToolPanelInstance("filters")!
    .collapseFilterGroups(["competitionGroupId"]);
}

function expandAll() {
  gridApi!.getToolPanelInstance("filters")!.expandFilterGroups();
}

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).collapseAll = collapseAll;
  (<any>window).expandAthleteAndCompetition = expandAthleteAndCompetition;
  (<any>window).collapseCompetition = collapseCompetition;
  (<any>window).expandAll = expandAll;
}
```

[Live example: Expand / Collapse Groups](https://www.ag-grid.com/examples/tool-panel-filters/expand-collapse-groups/typescript)

## Expand / Collapse Filters

It is possible to expand and collapse the filters in the Filters Tool Panel by invoking methods on the Filters Tool Panel Instance. These methods are shown below:

```ts
interface IFiltersToolPanel {
    expandFilters(colIds?: string[]): void;
    collapseFilters(colIds?: string[]): void;
    ... // other methods
}
```

The code snippet below shows how to expand and collapse filters using the Filters Tool Panel instance:

```js
// lookup Filters Tool Panel instance by id, in this case using the default filter instance id
const filtersToolPanel = api.getToolPanelInstance('filters');

// expands all filters in the Filters Tool Panel
filtersToolPanel.expandFilters();

// collapses all filters in the Filters Tool Panel
filtersToolPanel.collapseFilters();

// expands 'year' and 'sport' filters in the Filters Tool Panel
filtersToolPanel.expandFilters(['year', 'sport']);

// collapses the 'year' filter in the Filters Tool Panel
filtersToolPanel.expandFilters(['year']);
```

Notice in the snippet above that it's possible to target individual filters by supplying `colId`s.

The example below demonstrates these methods in action. Note the following:

- When the grid is initialised all filters are collapsed by default
- Clicking **Expand Year & Sport** just expands the 'year' and 'sport' filters by invoking: `expandFilters(['year', 'sport'])`.
- Clicking **Collapse Year** just collapses the 'year' filter using: `collapseFilters(['year'])`.
- Clicking **Expand All** expands all filters using: `expandFilters()`.
- Clicking **Collapse All** collapses all filters using: `collapseFilters()`.

#### Expand / Collapse Filters

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

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

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

const columnDefs: (ColDef | ColGroupDef)[] = [
  {
    groupId: "athleteGroupId",
    headerName: "Athlete",
    children: [
      {
        headerName: "Name",
        field: "athlete",
        minWidth: 200,
        filter: "agTextColumnFilter",
      },
      { field: "age" },
      {
        groupId: "competitionGroupId",
        headerName: "Competition",
        children: [{ field: "year" }, { field: "date", minWidth: 180 }],
      },
      { field: "country", minWidth: 200 },
    ],
  },
  { colId: "sport", field: "sport", minWidth: 200 },
  {
    headerName: "Medals",
    children: [
      { field: "gold" },
      { field: "silver" },
      { field: "bronze" },
      { field: "total" },
    ],
  },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: columnDefs,
  defaultColDef: {
    flex: 1,
    minWidth: 100,
    filter: true,
  },
  sideBar: "filters",
};

function collapseAll() {
  gridApi!.getToolPanelInstance("filters")!.collapseFilters();
}

function expandYearAndSport() {
  gridApi!.getToolPanelInstance("filters")!.expandFilters(["year", "sport"]);
}

function collapseYear() {
  gridApi!.getToolPanelInstance("filters")!.collapseFilters(["year"]);
}

function expandAll() {
  gridApi!.getToolPanelInstance("filters")!.expandFilters();
}

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).collapseAll = collapseAll;
  (<any>window).expandYearAndSport = expandYearAndSport;
  (<any>window).collapseYear = collapseYear;
  (<any>window).expandAll = expandAll;
}
```

[Live example: Expand / Collapse Filters](https://www.ag-grid.com/examples/tool-panel-filters/expand-collapse-filters/typescript)

## Custom Filters Layout

The order of columns in the Filters Tool Panel is derived from the `columnDefs` supplied in the grid options, and is kept in sync with the grid when columns are moved by default. However custom filter layouts can also be defined by invoking the following method on the Filters Tool Panel Instance:

```ts
interface IFiltersToolPanel {
    setFilterLayout(colDefs: ColDef[]): void;
    ... // other methods
}
```

Notice that the same [Column Definitions](https://www.ag-grid.com/javascript-data-grid/column-definitions/) that are supplied in the grid options are also passed to `setFilterLayout(colDefs)`.

The code snippets below show how to set custom filter layouts using the Filters Tool Panel instance:

```js
const gridOptions = {
    // original column definitions supplied to the grid
    columnDefs: [
        { field: 'a' },
        { field: 'b' },
        { field: 'c' },
    ],

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

```js
// lookup Filters Tool Panel instance by id, in this case using the default columns instance id
const filtersToolPanel = api.getToolPanelInstance('filters');

// set custom Filters Tool Panel layout
filtersToolPanel.setFilterLayout([
    {
        headerName: 'Group 1', // group doesn't appear in grid
        children: [
            { field: 'c' }, // custom column order with column "b" omitted
            { field: 'a' }
        ]
    }
]);
```

Notice from the snippet above that it's possible to define groups in the tool panel that don't exist in the grid. Also note that filters can be omitted or positioned in a different order. However note that all referenced columns (that contain filters) must already exist in the grid.

> **Note**
>
> When providing a custom layout it is recommend to enable `suppressSyncLayoutWithGrid` in the tool panel params to prevent users changing the layout when moving columns in the grid.

The example below shows two custom layouts for the Filters Tool Panel. Note the following:

- When the grid is initialised the filter layout in the Filters Tool Panel matches what is supplied to the grid in `gridOptions.columnDefs`.
- Clicking **Custom Sort Layout** invokes `setFilterLayout(colDefs)` with a list of column definitions arranged in ascending order.
- Clicking **Custom Group Layout** invokes `setFilterLayout(colDefs)` with a list of column definitions containing groups that don't appear in the grid.
- Moving columns in the grid won't affect the custom layouts as `suppressSyncLayoutWithGrid` is enabled.

#### Custom Filters Layout

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

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

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

const columnDefs: (ColDef | ColGroupDef)[] = [
  {
    headerName: "Athlete",
    children: [
      {
        headerName: "Name",
        field: "athlete",
        minWidth: 200,
        filter: "agTextColumnFilter",
      },
      { field: "age" },
      { field: "country", minWidth: 200 },
    ],
  },
  {
    headerName: "Competition",
    children: [{ field: "year" }, { field: "date", minWidth: 180 }],
  },
  { colId: "sport", field: "sport", minWidth: 200 },
  {
    headerName: "Medals",
    children: [
      { field: "gold" },
      { field: "silver" },
      { field: "bronze" },
      { field: "total" },
    ],
  },
];

const sortedToolPanelColumnDefs = [
  {
    headerName: "Athlete",
    children: [
      { field: "age" },
      { field: "country" },
      { headerName: "Name", field: "athlete" },
    ],
  },
  {
    headerName: "Competition",
    children: [{ field: "date" }, { field: "year" }],
  },
  {
    headerName: "Medals",
    children: [
      { field: "bronze" },
      { field: "gold" },
      { field: "silver" },
      { field: "total" },
    ],
  },
  { colId: "sport", field: "sport", width: 110 },
];

const customToolPanelColumnDefs = [
  {
    headerName: "Dummy Group 1",
    children: [
      { field: "age" },
      { headerName: "Name", field: "athlete" },
      {
        headerName: "Dummy Group 2",
        children: [{ colId: "sport" }, { field: "country" }],
      },
    ],
  },
  {
    headerName: "Medals",
    children: [
      { field: "total" },
      { field: "bronze" },
      {
        headerName: "Dummy Group 3",
        children: [{ field: "silver" }, { field: "gold" }],
      },
    ],
  },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  defaultColDef: {
    filter: true,
  },
  columnDefs: columnDefs,
  sideBar: {
    toolPanels: [
      {
        id: "filters",
        labelDefault: "Filters",
        labelKey: "filters",
        iconKey: "filter",
        toolPanel: "agFiltersToolPanel",
        toolPanelParams: {
          suppressExpandAll: false,
          suppressFilterSearch: false,
          // prevents custom layout changing when columns are reordered in the grid
          suppressSyncLayoutWithGrid: true,
        },
      },
    ],
    defaultToolPanel: "filters",
  },
};

function setCustomSortLayout() {
  const filtersToolPanel = gridApi!.getToolPanelInstance("filters");
  filtersToolPanel!.setFilterLayout(sortedToolPanelColumnDefs);
}

function setCustomGroupLayout() {
  const filtersToolPanel = gridApi!.getToolPanelInstance("filters");
  filtersToolPanel!.setFilterLayout(customToolPanelColumnDefs);
}

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).setCustomSortLayout = setCustomSortLayout;
  (<any>window).setCustomGroupLayout = setCustomGroupLayout;
}
```

[Live example: Custom Filters Layout](https://www.ag-grid.com/examples/tool-panel-filters/custom-layout/typescript)