Filtering in React TreeGrid

13 Apr 202619 minutes to read

Filtering displays only records that match specified criteria. Enable filtering by setting allowFiltering to true. Configure behavior using filterSettings.

To use filtering, inject the Filter module in the TreeGrid.

The following video provides a quick overview of filtering:

app.jsx
app.tsx
import { ColumnDirective, ColumnsDirective, Filter, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering={true}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
          <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Filter]}/>
    </TreeGridComponent>;
}
;
export default App;
import { ColumnDirective, ColumnsDirective, Filter, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering={true}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
          <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Filter]}/>
    </TreeGridComponent>
};
export default App;

Apply and clear filtering programmatically using filterByColumn and clearFiltering.

To disable filtering for a specific column, set columns.allowFiltering to false.

Filter hierarchy modes

TreeGrid provides support for a set of filtering modes with filterSettings.filterHierarchyMode property. The available modes are:

Parent (default): Displays matching records along with their parent records. If a match has no parent, only the matching record is shown.
Child : Displays matching records along with their child records. If a match has no children, only the matching record is shown.
Both : Displays matching records with both parent and child records. If no related parent or child exists, only the matching record is shown.
None : Displays only the records that match the filter.

app.jsx
app.tsx
import { DropDownListComponent } from "@syncfusion/ej2-react-dropdowns";
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    let treegrid;
    const data = ['Parent', 'Child', 'Both', 'None'];
    const onChange = (sel) => {
        const mode = sel.value.toString();
        if (treegrid) {
            treegrid.filterSettings.hierarchyMode = mode;
            treegrid.clearFiltering();
        }
    };
    return (<div><DropDownListComponent popupHeight="250px" dataSource={data} value="Parent" change={onChange} width="150px"/>
        <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='225' allowFiltering={true} ref={g => treegrid = g}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Filter]}/>
    </TreeGridComponent></div>);
}
;
export default App;
import { ChangeEventArgs, DropDownListComponent } from "@syncfusion/ej2-react-dropdowns";
import { ColumnDirective, ColumnsDirective, Filter, FilterHierarchyMode } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGrid, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    let treegrid: TreeGridComponent | null;
    const data: string[] = ['Parent', 'Child', 'Both', 'None']
    const onChange = (sel: ChangeEventArgs): void => {
        const mode: FilterHierarchyMode = sel.value.toString() as FilterHierarchyMode;
        if (treegrid) {
            treegrid.filterSettings.hierarchyMode = mode;
            treegrid.clearFiltering();
        }
    }

    return(<div><DropDownListComponent popupHeight="250px" dataSource={data} value="Parent" change={onChange} width="150px"/>
        <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='225' allowFiltering={true} ref={g => treegrid = g}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Filter]}/>
    </TreeGridComponent></div>)
};
export default App;

Initial filter

Apply filters on initial render by specifying predicate objects in filterSettings.columns.

app.jsx
app.tsx
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    const FilterOptions = {
        columns: [
            { field: 'taskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'plan' },
            { field: 'duration', matchCase: false, operator: 'equal', predicate: 'and', value: 5 }
        ]
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' allowFiltering={true} filterSettings={FilterOptions}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
          <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Filter]}/>
    </TreeGridComponent>;
}
;
export default App;
import { ColumnDirective, ColumnsDirective, Filter, FilterSettingsModel } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    const FilterOptions: FilterSettingsModel = {
        columns: [
            { field: 'taskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'plan' },
            { field: 'duration', matchCase: false, operator: 'equal', predicate: 'and', value: 5 }]
    };

    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
          height='275' allowFiltering={true} filterSettings={FilterOptions}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='75' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
          <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Filter]}/>
    </TreeGridComponent>
};
export default App;

Filter operators

Define the operator for each filtered column using the operator property in filterSettings.columns.

Operator	Description	Supported types
startswith	Checks whether the value begins with the specified value.	String
endswith	Checks whether the value ends with the specified value.	String
contains	Checks whether the value contains the specified value.	String
equal	Checks whether the value is equal to the specified value.	String \| Number \| Boolean \| Date
notequal	Checks for values not equal to the specified value.	String \| Number \| Boolean \| Date
greaterthan	Checks whether the value is greater than the specified value.	Number \| Date
greaterthanorequal	Checks whether a value is greater than or equal to the specified value.	Number \| Date
lessthan	Checks whether the value is less than the specified value.	Number \| Date
lessthanorequal	Checks whether the value is less than or equal to the specified value.	Number \| Date

By default, the filterSettings.columns.operator value is equal.

Diacritics

By default, the TreeGrid ignores diacritic characters during filtering. To include diacritic characters, set filterSettings.ignoreAccent to true.

In the following example, type aero in the Name column to match diacritic characters.

app.jsx
app.tsx
import { ColumnDirective, ColumnsDirective, Filter } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { diacritics } from './datasource';
function App() {
    const FilterOptions = {
        ignoreAccent: true
    };
    return <TreeGridComponent dataSource={diacritics} treeColumnIndex={0} childMapping='Children' height='275' allowFiltering={true} filterSettings={FilterOptions}>
        <ColumnsDirective>
          <ColumnDirective field='EmpID' headerText='Employee ID' width='95'/>
          <ColumnDirective field='Name' headerText='Name' width='180'/>
          <ColumnDirective field='DOB' headerText='DOB' width='90' format='yMd' textAlign='Right' type='date'/>
          <ColumnDirective field='Country' headerText='Country' width='100'/>
        </ColumnsDirective>
        <Inject services={[Filter]}/>
    </TreeGridComponent>;
}
;
export default App;
import { ColumnDirective, ColumnsDirective, Filter, FilterSettingsModel } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { diacritics } from './datasource';

function App() {
    const FilterOptions: FilterSettingsModel = {
        ignoreAccent: true
    };

    return <TreeGridComponent dataSource={diacritics} treeColumnIndex={0} childMapping='Children'
        height='275' allowFiltering={true} filterSettings={FilterOptions}>
        <ColumnsDirective>
          <ColumnDirective field='EmpID' headerText='Employee ID' width='95'/>
          <ColumnDirective field='Name' headerText='Name' width='180'/>
          <ColumnDirective field='DOB' headerText='DOB' width='90' format='yMd' textAlign='Right' type='date' />
          <ColumnDirective field='Country' headerText='Country' width='100' />
        </ColumnsDirective>
        <Inject services={[Filter]}/>
    </TreeGridComponent>
};
export default App;

Refer to the React TreeGrid feature tour for key capabilities. Explore the React TreeGrid example to learn how to present and manipulate data.

Search docs

Ask Syncfusion AI Assistant