---
title: "Tree Data - Filtering"
enterprise: true
framework: react
version: "36.1.0"
---

# Tree Data - Filtering

Filtering can be applied to Tree Data to reduce the range of displayed data.

## Filtering

By default, when a group row passes a [Filter](https://www.ag-grid.com/react-data-grid/filtering-overview/), the children will also be displayed.

The example below applies a filter to the group column for 'ProjectAlpha', note that two 'ProjectAlpha' groups are displayed alongside all of their children.

#### Filtering

```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 {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GetDataPath,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import { TreeDataModule } from "ag-grid-enterprise";
import { getData } from "./data";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [ClientSideRowModelModule, TreeDataModule, TextFilterModule];

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>(getData());
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "created" },
    { field: "modified" },
    {
      field: "size",
      aggFunc: "sum",
      valueFormatter: (params) => {
        const sizeInKb = params.value / 1024;
        if (sizeInKb > 1024) {
          return `${+(sizeInKb / 1024).toFixed(2)} MB`;
        } else {
          return `${+sizeInKb.toFixed(2)} KB`;
        }
      },
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
    };
  }, []);
  const autoGroupColumnDef = useMemo<AutoGroupColumnDef>(() => {
    return {
      headerName: "File Explorer",
      minWidth: 150,
      filter: "agTextColumnFilter",
      cellRendererParams: {
        suppressCount: true,
      },
    };
  }, []);
  const getDataPath = useCallback((data) => data.path, []);

  const onGridReady = useCallback((params: GridReadyEvent) => {
    params.api.setFilterModel({
      "ag-Grid-AutoColumn": {
        filterType: "text",
        type: "startsWith",
        filter: "ProjectAlpha",
      },
    });
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            autoGroupColumnDef={autoGroupColumnDef}
            treeData={true}
            groupDefaultExpanded={-1}
            getDataPath={getDataPath}
            onGridReady={onGridReady}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Filtering](https://www.ag-grid.com/examples/tree-data-filtering/filtering-simple/reactFunctionalTs)

## Exclude Children when Filtering

To omit children when a group row passes a filter, set `excludeChildrenWhenTreeDataFiltering` to `true` in the grid options.

The example below applies a default filter to the group column for 'ProjectAlpha', note that only one 'ProjectAlpha' group passes the filter instead of two - this is because the `Desktop -> ProjectAlpha` group is a [Filler Group](https://www.ag-grid.com/react-data-grid/tree-data-paths/#filler-groups).

#### Exclude Children when Filtering

```tsx
'use client';
import React, {
  StrictMode,
  useCallback,
  useMemo,
  useRef,
  useState,
} from "react";
import { createRoot } from "react-dom/client";

import type { ColDef, GridReadyEvent } from "ag-grid-community";
import {
  ClientSideRowModelModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import { TreeDataModule } from "ag-grid-enterprise";
import { AgGridProvider, AgGridReact } from "ag-grid-react";

import { getData } from "./data";
import "./styles.css";

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

const modules = [TextFilterModule, ClientSideRowModelModule, TreeDataModule];

const GridExample = () => {
  const gridRef = useRef<AgGridReact>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>(getData());
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "created" },
    { field: "modified" },
    {
      field: "size",
      aggFunc: "sum",
      valueFormatter: (params) => {
        const sizeInKb = params.value / 1024;
        if (sizeInKb > 1024) {
          return `${+(sizeInKb / 1024).toFixed(2)} MB`;
        } else {
          return `${+sizeInKb.toFixed(2)} KB`;
        }
      },
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
    };
  }, []);
  const autoGroupColumnDef = useMemo<ColDef>(() => {
    return {
      headerName: "File Explorer",
      minWidth: 150,
      filter: "agTextColumnFilter",
      cellRendererParams: {
        suppressCount: true,
      },
    };
  }, []);
  const getDataPath = useCallback((data) => data.path, []);

  const onGridReady = useCallback((params: GridReadyEvent) => {
    params.api.setFilterModel({
      "ag-Grid-AutoColumn": {
        filterType: "text",
        type: "startsWith",
        filter: "ProjectAlpha",
      },
    });
  }, []);

  const toggleFilter = useCallback(() => {
    const checkbox = document.querySelector<HTMLInputElement>(
      "#excludeChildrenWhenTreeDataFiltering",
    )!;
    gridRef.current!.api.setGridOption(
      "excludeChildrenWhenTreeDataFiltering",
      checkbox.checked,
    );
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="example-wrapper">
          <div className="example-header">
            <label>
              <span>excludeChildrenWhenTreeDataFiltering:</span>
              <input
                type="checkbox"
                id="excludeChildrenWhenTreeDataFiltering"
                onClick={toggleFilter}
                defaultChecked
              />
            </label>
          </div>

          <div style={gridStyle}>
            <AgGridReact
              ref={gridRef}
              rowData={rowData}
              columnDefs={columnDefs}
              defaultColDef={defaultColDef}
              autoGroupColumnDef={autoGroupColumnDef}
              treeData={true}
              groupDefaultExpanded={-1}
              excludeChildrenWhenTreeDataFiltering={true}
              getDataPath={getDataPath}
              onGridReady={onGridReady}
            />
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Exclude Children when Filtering](https://www.ag-grid.com/examples/tree-data-filtering/filtering-exclude-children/reactFunctionalTs)

This demonstrates the following configuration:

```jsx
const excludeChildrenWhenTreeDataFiltering = true;

<AgGridReact excludeChildrenWhenTreeDataFiltering={excludeChildrenWhenTreeDataFiltering} />
```

## Ignore Filters when Aggregating Values

When using Tree Data and filters, the aggregates are only calculated from the rows which pass the filter. This can be changed by enabling the grid option `suppressAggFilteredOnly`.

The example below has a filter applied resulting in only one of the `Documents` children being displayed. Note that when the `suppressAggFilteredOnly` option is toggled on, the `Documents` group aggregation will display the sum of all children, regardless of the filter.

#### Aggregated Values Based on Pre-Filtered Data

```tsx
'use client';
import React, {
  StrictMode,
  useCallback,
  useMemo,
  useRef,
  useState,
} from "react";
import { createRoot } from "react-dom/client";

import type { ColDef, GridReadyEvent } from "ag-grid-community";
import {
  ClientSideRowModelModule,
  NumberFilterModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import { TreeDataModule } from "ag-grid-enterprise";
import { AgGridProvider, AgGridReact } from "ag-grid-react";

import { getData } from "./data";
import "./styles.css";

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

const modules = [
  NumberFilterModule,
  TextFilterModule,
  ClientSideRowModelModule,
  TreeDataModule,
];

const GridExample = () => {
  const gridRef = useRef<AgGridReact>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>(getData());
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "created" },
    { field: "modified" },
    {
      field: "size",
      aggFunc: "sum",
      filter: "agNumberColumnFilter",
      valueFormatter: (params) => {
        const sizeInKb = params.value / 1024;

        if (sizeInKb > 1024) {
          return `${+(sizeInKb / 1024).toFixed(2)} MB`;
        } else {
          return `${+sizeInKb.toFixed(2)} KB`;
        }
      },
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
    };
  }, []);
  const autoGroupColumnDef = useMemo<ColDef>(() => {
    return {
      headerName: "File Explorer",
      minWidth: 150,

      cellRendererParams: {
        suppressCount: true,
      },
    };
  }, []);
  const getDataPath = useCallback((data) => data.path, []);

  const onGridReady = useCallback((params: GridReadyEvent) => {
    params.api.setFilterModel({
      size: {
        filterType: "number",
        type: "equals",
        filter: 5193728,
      },
    });
  }, []);

  const toggleCheckbox = useCallback(() => {
    const checkbox = document.querySelector<HTMLInputElement>(
      "#suppressAggFilteredOnly",
    )!;
    gridRef.current!.api.setGridOption(
      "suppressAggFilteredOnly",
      checkbox.checked,
    );
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="example-wrapper">
          <div className="example-header">
            <label>
              <span>suppressAggFilteredOnly:</span>
              <input
                type="checkbox"
                id="suppressAggFilteredOnly"
                onClick={toggleCheckbox}
                defaultChecked
              />
            </label>
          </div>

          <div style={gridStyle}>
            <AgGridReact
              ref={gridRef}
              rowData={rowData}
              columnDefs={columnDefs}
              defaultColDef={defaultColDef}
              autoGroupColumnDef={autoGroupColumnDef}
              treeData={true}
              groupDefaultExpanded={1}
              suppressAggFilteredOnly={true}
              getDataPath={getDataPath}
              onGridReady={onGridReady}
            />
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Aggregated Values Based on Pre-Filtered Data](https://www.ag-grid.com/examples/tree-data-filtering/group-agg-filtering/reactFunctionalTs)

This demonstrates the following configuration:

```jsx
const suppressAggFilteredOnly = true;

<AgGridReact suppressAggFilteredOnly={suppressAggFilteredOnly} />
```

## Filter Components

### Tree Filter

The [Tree Filter](https://www.ag-grid.com/react-data-grid/filter-set-tree-list/) is a version of the [Set Filter](https://www.ag-grid.com/react-data-grid/filter-set/) that is designed to work with hierarchical data by displaying the set filter in a tree structure that matches the data.

The example below demonstrates the Tree Filter on the Group column:

#### Tree List

```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 {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GetDataPath,
  GridApi,
  GridOptions,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  FiltersToolPanelModule,
  SetFilterModule,
  TreeDataModule,
} from "ag-grid-enterprise";
import { getData } from "./data";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  FiltersToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  SetFilterModule,
  TreeDataModule,
];

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>(getData());
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "created" },
    { field: "modified" },
    {
      field: "size",
      aggFunc: "sum",
      valueFormatter: (params) => {
        const sizeInKb = params.value / 1024;
        if (sizeInKb > 1024) {
          return `${+(sizeInKb / 1024).toFixed(2)} MB`;
        } else {
          return `${+sizeInKb.toFixed(2)} KB`;
        }
      },
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 200,
    };
  }, []);
  const autoGroupColumnDef = useMemo<AutoGroupColumnDef>(() => {
    return {
      cellRendererParams: {
        suppressCount: true,
      },
      filter: "agSetColumnFilter",
      filterParams: {
        treeList: true,
        keyCreator: (params) => (params.value ? params.value.join("#") : null),
      },
    };
  }, []);
  const getDataPath = useCallback((data: any) => data.path, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            autoGroupColumnDef={autoGroupColumnDef}
            treeData={true}
            groupDefaultExpanded={-1}
            getDataPath={getDataPath}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Tree List](https://www.ag-grid.com/examples/tree-data-filtering/tree-list-filtering/reactFunctionalTs)

This demonstrates the following configuration to enable the Tree List Filter. Note that a `keyCreator` must be used to convert each path into a unique string:

```jsx
const autoGroupColumnDef = useMemo(() => { 
	return {
        filter: 'agSetColumnFilter',
        filterParams: {
            treeList: true,
            keyCreator: (params) => (params.value ? params.value.join('#') : null),
        },
    };
}, []);

<AgGridReact autoGroupColumnDef={autoGroupColumnDef} />
```

For further information, refer to the [Tree Filter](https://www.ag-grid.com/react-data-grid/filter-set-tree-list/) documentation.

### Set Filter

The [Set Filter](https://www.ag-grid.com/react-data-grid/filter-set/) can be used with Tree Data to list all unique values across each level of the group hierarchy.

The example below demonstrates the Set Filter on the Size column.

#### Set List

```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 {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GetDataPath,
  GridApi,
  GridOptions,
  IsRowFilterable,
  ModuleRegistry,
  ValueFormatterParams,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  FiltersToolPanelModule,
  SetFilterModule,
  TreeDataModule,
} from "ag-grid-enterprise";
import { getData } from "./data";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  FiltersToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  SetFilterModule,
  TreeDataModule,
];

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>(getData());
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "created" },
    { field: "modified" },
    {
      field: "size",
      aggFunc: "sum",
      filter: "agSetColumnFilter",
      filterParams: {
        valueFormatter: (params: ValueFormatterParams) => {
          const sizeInKb = params.value / 1024;
          if (sizeInKb > 1024) {
            return `${+(sizeInKb / 1024).toFixed(2)} MB`;
          } else {
            return `${+sizeInKb.toFixed(2)} KB`;
          }
        },
      },
      valueFormatter: (params) => {
        const sizeInKb = params.value / 1024;
        if (sizeInKb > 1024) {
          return `${+(sizeInKb / 1024).toFixed(2)} MB`;
        } else {
          return `${+sizeInKb.toFixed(2)} KB`;
        }
      },
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 200,
    };
  }, []);
  const autoGroupColumnDef = useMemo<AutoGroupColumnDef>(() => {
    return {
      cellRendererParams: {
        suppressCount: true,
      },
    };
  }, []);
  const getDataPath = useCallback((data: any) => data.path, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            autoGroupColumnDef={autoGroupColumnDef}
            treeData={true}
            groupDefaultExpanded={-1}
            groupAggFiltering={true}
            getDataPath={getDataPath}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Set List](https://www.ag-grid.com/examples/tree-data-filtering/set-list-filtering/reactFunctionalTs)

> **Note**
>
> When using the Set Filter with [Aggregations](https://www.ag-grid.com/react-data-grid/aggregation/) the set filter options can change when applying filters.
>
> To prevent this it is advised that you [Enable Aggregate Value Filtering](https://www.ag-grid.com/react-data-grid/aggregation-filtering/#filtering-for-aggregated-values).