Sorting in React Treegrid component

16 Sep 202316 minutes to read

Sorting enables you to sort data in the Ascending or Descending order. To sort a column, click the column header.

To sort multiple columns, press and hold the CTRL key and click the column header. You can clear sorting of any one of the multi-sorted columns by pressing and holding the SHIFT key and clicking the specific column header.

To enable sorting in the TreeGrid, set the allowSorting to true. Sorting options can be configured through the sortSettings.

To use Sorting, inject Sort module in TreeGrid.

app.jsx

import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sortData } from './datasource';
function App() {
    return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks' allowSorting={true} height='315'>
        <ColumnsDirective>
            <ColumnDirective field='Category' headerText='Category' width='140'/>
            <ColumnDirective field='orderName' headerText='Order Name' width='180'/>
            <ColumnDirective field='orderDate' headerText='Order Date' width='150' format='yMd' textAlign='Right' type='date'/>
            <ColumnDirective field='units' headerText='Units' width='90' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Sort]}/>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sortData } from './datasource';

function App() {
    return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks' allowSorting={true} height='315'>
        <ColumnsDirective>
            <ColumnDirective field='Category' headerText='Category' width='140'/>
            <ColumnDirective field='orderName' headerText='Order Name' width='180'/>
            <ColumnDirective field='orderDate' headerText='Order Date' width='150' format='yMd' textAlign='Right' type='date' />
            <ColumnDirective field='units' headerText='Units' width='90' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Sort]}/>
    </TreeGridComponent>
};
export default App;

• TreeGrid columns are sorted in the Ascending order. If you click the already sorted column, the sort direction toggles.
• You can apply and clear sorting by invoking sortByColumn and clearSorting methods.
• To disable sorting for a particular column, set the columns.allowSorting to false.

Initial Sort

To sort at initial rendering, set the field and direction in the sortSettings.columns.

app.jsx

import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sortData } from './datasource';
function App() {
    const sortingOptions = {
        columns: [
            { field: 'Category', direction: 'Ascending' },
            { field: 'orderName', direction: 'Ascending' }
        ]
    };
    return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks' allowSorting={true} height='315' sortSettings={sortingOptions}>
        <ColumnsDirective>
            <ColumnDirective field='Category' headerText='Category' width='140'/>
            <ColumnDirective field='orderName' headerText='Order Name' width='200'/>
            <ColumnDirective field='orderDate' headerText='Order Date' width='150' format='yMd' textAlign='Right' type='date'/>
            <ColumnDirective field='units' headerText='Units' width='90' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Sort]}/>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

import { ColumnDirective, ColumnsDirective, Inject, Sort, SortSettingsModel, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sortData } from './datasource';

function App() {
    const sortingOptions: SortSettingsModel = {
        columns: [
            { field: 'Category', direction: 'Ascending' },
            { field: 'orderName', direction: 'Ascending' }
        ]
    };

    return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks' allowSorting={true} height='315' sortSettings={sortingOptions}>
        <ColumnsDirective>
            <ColumnDirective field='Category' headerText='Category' width='140'/>
            <ColumnDirective field='orderName' headerText='Order Name' width='200'/>
            <ColumnDirective field='orderDate' headerText='Order Date' width='150' format='yMd' textAlign='Right' type='date' />
            <ColumnDirective field='units' headerText='Units' width='90' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Sort]}/>
    </TreeGridComponent>
};
export default App;

Sorting Events

During the sort action, the treegrid component triggers two events. The actionBegin event triggers before the sort action starts, and the actionComplete event triggers after the sort action is completed. Using these events you can perform the needed actions.

app.jsx

import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sortData } from './datasource';
function App() {
    const actionHandler = (args) => {
        /** custom Action */
        alert(args.requestType + ' ' + args.type);
    };
    return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks' allowSorting={true} height='315' actionBegin={actionHandler} actionComplete={actionHandler}>
        <ColumnsDirective>
            <ColumnDirective field='Category' headerText='Category' width='140'/>
            <ColumnDirective field='orderName' headerText='Order Name' width='200'/>
            <ColumnDirective field='orderDate' headerText='Order Date' width='120' format='yMd' textAlign='Right' type='date'/>
            <ColumnDirective field='units' headerText='Units' width='90' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Sort]}/>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

import { ActionEventArgs } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sortData } from './datasource';

function App() {
    const actionHandler = (args: ActionEventArgs) => {
        /** custom Action */
        alert(args.requestType + ' ' + args.type);
    }

    return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks'
    allowSorting={true} height='315' actionBegin={actionHandler}
        actionComplete={actionHandler}>
        <ColumnsDirective>
            <ColumnDirective field='Category' headerText='Category' width='140'/>
            <ColumnDirective field='orderName' headerText='Order Name' width='200'/>
            <ColumnDirective field='orderDate' headerText='Order Date' width='120' format='yMd' textAlign='Right' type='date' />
            <ColumnDirective field='units' headerText='Units' width='90' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Sort]}/>
    </TreeGridComponent>
};
export default App;

The args.requestType is the current action name. For example, in sorting the args.requestType value is sorting.

Custom sort comparer

You can customize the default sort action for a column by defining the column.sortComparer property. The sort comparer function has the same functionality like Array.sort sort comparer.

In the following example, custom sort comparer function was defined in the Category column.

app.jsx

import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sortData } from './datasource';
function App() {
    /** Custom comparer function */
    const sortComparer = (reference, comparer) => {
        if (reference < comparer) {
            return -1;
        }
        if (reference > comparer) {
            return 1;
        }
        return 0;
    };
    return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks' allowSorting={true} height='315'>
        <ColumnsDirective>
            <ColumnDirective field='Category' headerText='Category' width='140'/>
            <ColumnDirective field='orderName' headerText='Order Name' sortComparer={sortComparer} width='200'/>
            <ColumnDirective field='orderDate' headerText='Order Date' width='120' format='yMd' textAlign='Right' type='date'/>
            <ColumnDirective field='units' headerText='Units' width='90' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Sort]}/>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sortData } from './datasource';

function App() {

    /** Custom comparer function */
    const sortComparer = (reference: string, comparer:  string) => {
        if (reference < comparer) {
            return -1;
        }
        if (reference > comparer) {
            return 1;
        }
        return 0;
    };

    return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks' allowSorting={true} height='315'>
        <ColumnsDirective>
            <ColumnDirective field='Category' headerText='Category' width='140'/>
            <ColumnDirective field='orderName' headerText='Order Name' sortComparer={sortComparer} width='200'/>
            <ColumnDirective field='orderDate' headerText='Order Date' width='120' format='yMd' textAlign='Right' type='date'/>
            <ColumnDirective field='units' headerText='Units' width='90' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Sort]}/>
    </TreeGridComponent>
};
export default App;

The sort comparer function will work only for the local data.

Touch Interaction

When you tap the treegrid header on touchscreen devices, the selected column header is sorted. A popup is displayed for multi-column sorting. To sort multiple columns, tap the popup, and then tap the desired treegrid headers.

The following screenshot shows treegrid touch sorting.

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our React Tree Grid example to knows how to present and manipulate data.