Filter bar in React TreeGrid

8 Oct 202515 minutes to read

When allowFiltering is set to true, a filter bar row appears below the header to filter data. Records can be filtered using different expressions based on the column type.

Filter bar expressions:

Enter the following expressions (operators) directly in the filter bar.

Expression	Example	Description	Column type
=	=value	equal	Number
!=	!=value	notequal	Number
>	>value	greaterthan	Number
<	<value	lessthan	Number
>=	>=value	greaterthanorequal	Number
<=	<=value	lessthanorequal	Number
*	*value	startswith	String
%	%value	endswith	String
N/A	N/A	Equal operator is always used for Date columns	Date
N/A	N/A	Equal operator is always used for Boolean columns	Boolean

app.jsx

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() {
    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;

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() {
    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;

By default, filterSettings.columns.operator is equal.

Filter bar template with custom component

Customize a column’s default filter bar input using a filter template.

The following example demonstrates the way to use filter template for a column when using filter bar. In the following example, the DropdownList component is used to filter duration column using filter template.

app.jsx

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 onChange = (args) => {
        if (treegrid) {
            if (args.value === 'All') {
                treegrid.clearFiltering();
            }
            else {
                treegrid.filterByColumn('duration', 'equal', parseInt(args.value, 0));
            }
        }
    };
    const templateOptions = (props) => {
        const dataSource = ['All', '1', '3', '4', '5', '6', '8', '9'];
        return (<DropDownListComponent id={props.column.field} popupHeight='250px' dataSource={dataSource} change={onChange}/>);
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' 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' filterTemplate={templateOptions}/>
        </ColumnsDirective>
        <Inject services={[Filter]}/>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ColumnDirective, ColumnsDirective, Filter } 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 onChange = (args: any): any => {
        if (treegrid) {
            if (args.value === 'All') {
            treegrid.clearFiltering();
            } else {
            treegrid.filterByColumn('duration', 'equal', parseInt(args.value, 0));
            }
        }
      }
    const templateOptions = (props:any): any => {
    const dataSource: string[] = ['All', '1', '3', '4', '5', '6', '8', '9'];
    return (<DropDownListComponent id={props.column.field} popupHeight='250px' dataSource={dataSource} change={onChange} /> );
    }

    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='275' 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' filterTemplate={templateOptions} />
        </ColumnsDirective>
        <Inject services={[Filter]}/>
    </TreeGridComponent>
};
export default App;

Change default filter bar operator

Change the default filter operator by extending filterModule.filterOperators in the dataBound event.

In the following sample, the default operator for string columns is changed from startsWith to contains.

app.jsx

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 dataBound = () => {
        Object.assign(treegrid.grid.filterModule.filterOperators, { startsWith: 'contains' });
    };
    return <TreeGridComponent dataSource={sampleData} dataBound={dataBound} treeColumnIndex={1} childMapping='subtasks' height='275' 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>;
}
;
export default App;

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() {
    let treegrid: TreeGridComponent | null;
    const dataBound = () => {
            Object.assign(treegrid.grid.filterModule.filterOperators,{ startsWith: 'contains' });
    }

    return <TreeGridComponent dataSource={sampleData} dataBound={dataBound} treeColumnIndex={1} childMapping='subtasks' height='275' 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>
};
export default App;