Module in React TreeGrid component
22 May 202624 minutes to read
Syncfusion React TreeGrid modules help optimize your application’s bundle size by including only the features you need. To enable a specific TreeGrid feature, import and inject the corresponding Feature Module into your TreeGrid configuration. The available TreeGrid Feature Modules include:
| Feature | Module | Description |
|---|---|---|
| Paging | Page |
Inject this module to use paging feature. |
| Sorting | Sort |
Inject this module to use sorting feature. |
| Filtering | Filter |
Inject this module to use filtering feature. |
| Editing | Edit |
Inject this module to use editing feature. |
| Aggregates | Aggregate |
Inject this module to use aggregate feature. |
| Column Chooser | ColumnChooser |
Inject this module to use column chooser feature. |
| Column Menu | ColumnMenu |
Inject this module to use column menu feature. |
| Command Column | CommandColumn |
Inject this module to use command column feature. |
| Context Menu | ContextMenu |
Inject this module to use context menu feature. |
| Detail Row | DetailRow |
Inject this module to use detail template feature. |
| Foreign Key | ForeignKey |
Inject this module to use foreign key feature. |
| Resize | Resize |
Inject this module to use resize feature. |
| Reordering | Reorder |
Inject this module to use reorder feature. |
| Row Drag and Drop | RowDD |
Inject this module to use row drag and drop feature. |
| Virtual Scrolling | VirtualScroll |
Inject this module to use virtual scrolling feature. |
| Infinite Scrolling | InfiniteScroll |
Inject this module to use infinite scrolling feature. |
| Toolbar | Toolbar |
Inject this module to use toolbar feature. |
| Excel Export | ExcelExport |
Inject this module to use excel export feature. |
| PDF Export | PdfExport |
Inject this module to use PDF export feature. |
Enabling basic features
The following example demonstrates how to enable basic features such as Paging, Sorting, Filtering, Toolbar and Editing by importing required modules from @syncfusion/ej2-react-treegrid and injecting them into the treegrid component.
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
// Import the required treegrid modules from the treegrid package.
import { Filter, Inject, Page, Sort } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
// Import Treegrid data from external file.
import { data } from './data';
function App() {
const pageSettings = { pageSize: 6 };
const filterSettings = { type: 'CheckBox' };
const editOptions = { allowEditing: true, allowAdding: true, allowDeleting: true };
const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const taskIDRules = { required: true, number: true };
const taskNameRules = { required: true };
return <div>
<TreeGridComponent dataSource={data} treeColumnIndex={1} childMapping='subtasks' allowPaging={true} pageSettings={pageSettings} allowSorting={true} allowFiltering={true} filterSettings={filterSettings} editSettings={editOptions} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' validationRules={taskIDRules} textAlign='Right' width='150'/>
<ColumnDirective field='TaskName' headerText='Task Name' validationRules={taskNameRules} width='170'/>
<ColumnDirective field='StartDate' headerText='Start Date' width='130' editType='datepickeredit' format='yMd' textAlign='Right' />
<ColumnDirective field='EndDate' headerText='End Date' width='130' editType='datepickeredit' format='yMd' textAlign='Right' />
<ColumnDirective field='Duration' headerText='Duration' width='100' editType='numericedit' textAlign='Right' />
</ColumnsDirective>
{/* Inject required TreeGrid features */}
<Inject services={[Page, Sort, Filter, Edit, Toolbar]} />
</TreeGridComponent>
</div>
}
export default App;import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
// Import the required treegrid modules from the treegrid package.
import { Inject, Page, Sort, Edit, Toolbar, Filter, FilterSettingsModel, PageSettingsModel, ToolbarItems, EditSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
// Import Treegrid data from external file.
import { data } from './data';
function App() {
const pageSettings: PageSettingsModel = { pageSize: 6 };
const filterSettings: FilterSettingsModel = { type: 'CheckBox' };
const editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true };
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const taskIDRules: Object = { required: true, number: true };
const taskNameRules: Object = { required: true };
return <div>
<TreeGridComponent dataSource={data} treeColumnIndex={1} childMapping='subtasks' allowPaging={true} pageSettings={pageSettings} allowSorting={true} allowFiltering={true} filterSettings={filterSettings} editSettings={editOptions} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='TaskID' headerText='Task ID' validationRules={taskIDRules} textAlign='Right' width='150'/>
<ColumnDirective field='TaskName' headerText='Task Name' validationRules={taskNameRules} width='170'/>
<ColumnDirective field='StartDate' headerText='Start Date' width='130' editType='datepickeredit' format='yMd' textAlign='Right' />
<ColumnDirective field='EndDate' headerText='End Date' width='130' editType='datepickeredit' format='yMd' textAlign='Right' />
<ColumnDirective field='Duration' headerText='Duration' width='100' editType='numericedit' textAlign='Right' />
</ColumnsDirective>
{/* Inject required TreeGrid features */}
<Inject services={[Page, Sort, Filter, Edit, Toolbar]} />
</TreeGridComponent>
</div>
}
export default App;export let data = [
{
TaskID: 1, TaskName: 'Planning', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4,
subtasks: [
{ TaskID: 2, TaskName: 'Plan timeline', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4 },
{ TaskID: 3, TaskName: 'Plan budget', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4 },
{ TaskID: 4, TaskName: 'Allocate resources', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4 },
{ TaskID: 5, TaskName: 'Planning complete', StartDate: new Date('02/07/2025'), EndDate: new Date('02/07/2025'), Duration: 1 },
],
},
{
TaskID: 6, TaskName: 'Design', StartDate: new Date('02/10/2025'), EndDate: new Date('02/14/2025'), Duration: 5,
subtasks: [
{ TaskID: 7, TaskName: 'Software Specification', StartDate: new Date('02/10/2025'), EndDate: new Date('02/12/2025'), Duration: 3 },
{ TaskID: 8, TaskName: 'Develop prototype', StartDate: new Date('02/10/2025'), EndDate: new Date('02/12/2025'), Duration: 3 },
{ TaskID: 9, TaskName: 'Get approval from customer', StartDate: new Date('02/13/2025'), EndDate: new Date('02/14/2025'), Duration: 2 },
{ TaskID: 10, TaskName: 'Design Documentation', StartDate: new Date('02/13/2025'), EndDate: new Date('02/14/2025'), Duration: 2 },
{ TaskID: 11, TaskName: 'Design complete', StartDate: new Date('02/14/2025'), EndDate: new Date('02/14/2025'), Duration: 1 },
],
},
{
TaskID: 12, TaskName: 'Implementation Phase', StartDate: new Date('02/17/2025'), EndDate: new Date('02/28/2025'), Duration: 12,
subtasks: [
{
TaskID: 13, TaskName: 'Phase 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
subtasks: [
{
TaskID: 14, TaskName: 'Implementation Module 1',
StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
subtasks: [
{ TaskID: 15, TaskName: 'Development Task 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
{ TaskID: 16, TaskName: 'Development Task 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
{ TaskID: 17, TaskName: 'Testing', StartDate: new Date('02/20/2025'), EndDate: new Date('02/21/2025'), Duration: 2 },
{ TaskID: 18, TaskName: 'Bug fix', StartDate: new Date('02/24/2025'), EndDate: new Date('02/25/2025'), Duration: 2 },
{ TaskID: 19, TaskName: 'Customer review meeting', StartDate: new Date('02/26/2025'), EndDate: new Date('02/27/2025'), Duration: 2 },
{ TaskID: 20, TaskName: 'Phase 1 complete', StartDate: new Date('02/27/2025'), EndDate: new Date('02/27/2025'), Duration: 1 },
],
},
],
},
{
TaskID: 21, TaskName: 'Phase 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/28/2025'), Duration: 12,
subtasks: [
{
TaskID: 22, TaskName: 'Implementation Module 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/28/2025'), Duration: 12,
subtasks: [
{ TaskID: 23, TaskName: 'Development Task 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/20/2025'), Duration: 4 },
{ TaskID: 24, TaskName: 'Development Task 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/20/2025'), Duration: 4 },
{ TaskID: 25, TaskName: 'Testing', StartDate: new Date('02/21/2025'), EndDate: new Date('02/24/2025'), Duration: 2 },
{ TaskID: 26, TaskName: 'Bug fix', StartDate: new Date('02/25/2025'), EndDate: new Date('02/26/2025'), Duration: 2 },
{ TaskID: 27, TaskName: 'Customer review meeting', StartDate: new Date('02/27/2025'), EndDate: new Date('02/28/2025'), Duration: 2 },
{ TaskID: 28, TaskName: 'Phase 2 complete', StartDate: new Date('02/28/2025'), EndDate: new Date('02/28/2025'), Duration: 1 },
],
},
],
},
{
TaskID: 29, TaskName: 'Phase 3', StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
subtasks: [
{
TaskID: 30, TaskName: 'Implementation Module 3',
StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
subtasks: [
{ TaskID: 31, TaskName: 'Development Task 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
{ TaskID: 32, TaskName: 'Development Task 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
{ TaskID: 33, TaskName: 'Testing', StartDate: new Date('02/20/2025'), EndDate: new Date('02/21/2025'), Duration: 2 },
{ TaskID: 34, TaskName: 'Bug fix', StartDate: new Date('02/24/2025'), EndDate: new Date('02/25/2025'), Duration: 2 },
{ TaskID: 35, TaskName: 'Customer review meeting', StartDate: new Date('02/26/2025'), EndDate: new Date('02/27/2025'), Duration: 2 },
{ TaskID: 36, TaskName: 'Phase 3 complete', StartDate: new Date('02/27/2025'), EndDate: new Date('02/27/2025'), Duration: 1 },
],
},
],
},
],
},
];export let data: object[] = [
{
TaskID: 1, TaskName: 'Planning', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4,
subtasks: [
{ TaskID: 2, TaskName: 'Plan timeline', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4 },
{ TaskID: 3, TaskName: 'Plan budget', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4 },
{ TaskID: 4, TaskName: 'Allocate resources', StartDate: new Date('02/04/2025'), EndDate: new Date('02/07/2025'), Duration: 4 },
{ TaskID: 5, TaskName: 'Planning complete', StartDate: new Date('02/07/2025'), EndDate: new Date('02/07/2025'), Duration: 1 },
],
},
{
TaskID: 6, TaskName: 'Design', StartDate: new Date('02/10/2025'), EndDate: new Date('02/14/2025'), Duration: 5,
subtasks: [
{ TaskID: 7, TaskName: 'Software Specification', StartDate: new Date('02/10/2025'), EndDate: new Date('02/12/2025'), Duration: 3 },
{ TaskID: 8, TaskName: 'Develop prototype', StartDate: new Date('02/10/2025'), EndDate: new Date('02/12/2025'), Duration: 3 },
{ TaskID: 9, TaskName: 'Get approval from customer', StartDate: new Date('02/13/2025'), EndDate: new Date('02/14/2025'), Duration: 2 },
{ TaskID: 10, TaskName: 'Design Documentation', StartDate: new Date('02/13/2025'), EndDate: new Date('02/14/2025'), Duration: 2 },
{ TaskID: 11, TaskName: 'Design complete', StartDate: new Date('02/14/2025'), EndDate: new Date('02/14/2025'), Duration: 1 },
],
},
{
TaskID: 12, TaskName: 'Implementation Phase', StartDate: new Date('02/17/2025'), EndDate: new Date('02/28/2025'), Duration: 12,
subtasks: [
{
TaskID: 13, TaskName: 'Phase 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
subtasks: [
{
TaskID: 14, TaskName: 'Implementation Module 1',
StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
subtasks: [
{ TaskID: 15, TaskName: 'Development Task 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
{ TaskID: 16, TaskName: 'Development Task 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
{ TaskID: 17, TaskName: 'Testing', StartDate: new Date('02/20/2025'), EndDate: new Date('02/21/2025'), Duration: 2 },
{ TaskID: 18, TaskName: 'Bug fix', StartDate: new Date('02/24/2025'), EndDate: new Date('02/25/2025'), Duration: 2 },
{ TaskID: 19, TaskName: 'Customer review meeting', StartDate: new Date('02/26/2025'), EndDate: new Date('02/27/2025'), Duration: 2 },
{ TaskID: 20, TaskName: 'Phase 1 complete', StartDate: new Date('02/27/2025'), EndDate: new Date('02/27/2025'), Duration: 1 },
],
},
],
},
{
TaskID: 21, TaskName: 'Phase 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/28/2025'), Duration: 12,
subtasks: [
{
TaskID: 22, TaskName: 'Implementation Module 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/28/2025'), Duration: 12,
subtasks: [
{ TaskID: 23, TaskName: 'Development Task 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/20/2025'), Duration: 4 },
{ TaskID: 24, TaskName: 'Development Task 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/20/2025'), Duration: 4 },
{ TaskID: 25, TaskName: 'Testing', StartDate: new Date('02/21/2025'), EndDate: new Date('02/24/2025'), Duration: 2 },
{ TaskID: 26, TaskName: 'Bug fix', StartDate: new Date('02/25/2025'), EndDate: new Date('02/26/2025'), Duration: 2 },
{ TaskID: 27, TaskName: 'Customer review meeting', StartDate: new Date('02/27/2025'), EndDate: new Date('02/28/2025'), Duration: 2 },
{ TaskID: 28, TaskName: 'Phase 2 complete', StartDate: new Date('02/28/2025'), EndDate: new Date('02/28/2025'), Duration: 1 },
],
},
],
},
{
TaskID: 29, TaskName: 'Phase 3', StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
subtasks: [
{
TaskID: 30, TaskName: 'Implementation Module 3',
StartDate: new Date('02/17/2025'), EndDate: new Date('02/27/2025'), Duration: 11,
subtasks: [
{ TaskID: 31, TaskName: 'Development Task 1', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
{ TaskID: 32, TaskName: 'Development Task 2', StartDate: new Date('02/17/2025'), EndDate: new Date('02/19/2025'), Duration: 3 },
{ TaskID: 33, TaskName: 'Testing', StartDate: new Date('02/20/2025'), EndDate: new Date('02/21/2025'), Duration: 2 },
{ TaskID: 34, TaskName: 'Bug fix', StartDate: new Date('02/24/2025'), EndDate: new Date('02/25/2025'), Duration: 2 },
{ TaskID: 35, TaskName: 'Customer review meeting', StartDate: new Date('02/26/2025'), EndDate: new Date('02/27/2025'), Duration: 2 },
{ TaskID: 36, TaskName: 'Phase 3 complete', StartDate: new Date('02/27/2025'), EndDate: new Date('02/27/2025'), Duration: 1 },
],
},
],
},
],
},
];