Filter bar in React Treegrid component

27 Jan 202315 minutes to read

By setting the allowFiltering to true, the filter bar row will render next to the header, which allows you to filter data. You can filter the records with different expressions depending upon the column type.

Filter bar expressions:

You can enter the following filter expressions (operators) manually 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 will always be used for date filter.	Date
N/A	N/A	Equal operator will always be used for Boolean filter.	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, the filterSettings.columns.operator value is equal.

Filterbar template with custom component

You can customize default filter bar component of a column by custom component using 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

You can change the default filter operator by extending filterModule.filterOperators property in dataBound event.

In the following sample, we have changed the default operator for string typed columns as contains from startsWith.

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;