Column menu in React Treegrid component

27 Jan 20234 minutes to read

The column menu has options to integrate features like sorting, filtering, and autofit. It will show a menu with the integrated feature when users click on multiple icon of the column. To enable column menu, you need to define the showColumnMenu property as true.

To use the column menu, inject the ColumnMenu module in the treegrid.

The default items are displayed in following table.

Item	Description
SortAscending	Sort the current column in ascending order.
SortDescending	Sort the current column in descending order.
AutoFit	Auto fit the current column.
AutoFitAll	Auto fit all columns.
Filter	Show the filter option as given in filterSettings.type

app.jsx

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

import { sampleData } from './datasource';
function App() {
    const filterSettings = { type: 'Menu' };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='315' allowFiltering={true} allowSorting={true} showColumnMenu={true} filterSettings={filterSettings}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='120' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='startDate' headerText='Start Date' width='150' format='yMd' textAlign='Right' type='date'/>
          <ColumnDirective field='duration' headerText='Duration' width='130' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Sort, Filter, ColumnMenu]}/>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

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

import { sampleData } from './datasource';

function App() {
    const filterSettings: FilterSettingsModel = { type:'Menu' };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='315' allowFiltering={true}
        allowSorting={true} showColumnMenu={true} filterSettings={filterSettings}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='120' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='startDate' headerText='Start Date' width='150' format='yMd' textAlign='Right' type='date' />
          <ColumnDirective field='duration' headerText='Duration' width='130' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Sort, Filter, ColumnMenu]}/>
    </TreeGridComponent>
};
export default App;

You can disable column menu for a particular column by defining the columns.showColumnMenu as false.