Syncfusion AI Assistant

How can I help you?

Getting Started with React TreeGrid

22 May 202610 minutes to read

This section outlines the steps to create a simple Essential JS 2 TreeGrid and demonstrates basic usage in a React application.

For a quick start with React TreeGrid, refer to this video:

Setup for local development

To set up a React application, choose between two popular tools: Vite or create-react-app.

Vite is recommended for new projects because it provides:

  • Faster development server: Vite uses native ES modules during development, resulting in significantly faster startup times and Hot Module Replacement (HMR) compared to traditional bundler.
  • Smaller bundle sizes: Optimized production builds with less overhead.
  • Better performance during development: Especially valuable when working with large component libraries like Syncfusion.
  • For detailed steps, refer to the Vite installation guide. Vite sets up your environment using JavaScript and optimizes your application for production.

create-react-app remains a valid choice when a traditional setup is preferred, organizational requirements exist, or an existing create-react-app project is in use. For more information, refer to the create-react-app documentation.

To create a new React application with Vite, run the following command:

npm create vite@latest my-app

Terminate the application, then run the following command:

cd my-app

Adding Syncfusion® React TreeGrid packages

To install the TreeGrid component, use the following command:

npm install @syncfusion/ej2-react-treegrid --save

Adding CSS reference

The following CSS files are available in the ../node_modules/@syncfusion package folder. Add these as references in src/App.css.

@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';  
@import '../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css';  
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';  
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import "../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-treegrid/styles/tailwind3.css";

Adding TreeGrid component

The treegrid code should be placed in the src/App.tsx file.

import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import './App.css';

// Defines the data to be displayed in the TreeGrid.
const 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: 'Design', StartDate: new Date('02/10/2025'), EndDate: new Date('02/14/2025'), Duration: 5,
        subtasks: [
            { TaskID: 5, TaskName: 'Software Specification', StartDate: new Date('02/10/2025'), EndDate: new Date('02/12/2025'), Duration: 3, },
            { TaskID: 6, TaskName: 'Design Documentation', StartDate: new Date('02/13/2025'), EndDate: new Date('02/14/2025'), Duration: 2, },
            { TaskID: 7, TaskName: 'Design complete', StartDate: new Date('02/14/2025'), EndDate: new Date('02/14/2025'), Duration: 1 },
        ],
    },
];

function App() {
    return <div>
        {/* Assigns the dataset to the TreeGrid component */}
        <TreeGridComponent dataSource={data} treeColumnIndex={1} childMapping='subtasks'>
            {/* Define the columns to be displayed */}
            <ColumnsDirective>
                <ColumnDirective field='TaskID' headerText='Task ID' textAlign='Right' width='150'/>
                <ColumnDirective field='TaskName' headerText='Task Name' width='170'/>
                <ColumnDirective field='StartDate' headerText='Start Date' width='130' format='yMd' textAlign='Right' />
                <ColumnDirective field='EndDate' headerText='End Date' width='130' format='yMd' textAlign='Right' />
                <ColumnDirective field='Duration' headerText='Duration' width='100' textAlign='Right' />
            </ColumnsDirective>
        </TreeGridComponent>
    </div>
}
export default App;
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import './App.css';

// Defines the data to be displayed in the TreeGrid.
const 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: 'Design', StartDate: new Date('02/10/2025'), EndDate: new Date('02/14/2025'), Duration: 5,
        subtasks: [
            { TaskID: 5, TaskName: 'Software Specification', StartDate: new Date('02/10/2025'), EndDate: new Date('02/12/2025'), Duration: 3, },
            { TaskID: 6, TaskName: 'Design Documentation', StartDate: new Date('02/13/2025'), EndDate: new Date('02/14/2025'), Duration: 2, },
            { TaskID: 7, TaskName: 'Design complete', StartDate: new Date('02/14/2025'), EndDate: new Date('02/14/2025'), Duration: 1 },
        ],
    },
];

function App() {
    return <div>
        {/* Assigns the dataset to the TreeGrid component */}
        <TreeGridComponent dataSource={data} treeColumnIndex={1} childMapping='subtasks'>
            {/* Define the columns to be displayed */}
            <ColumnsDirective>
                <ColumnDirective field='TaskID' headerText='Task ID' textAlign='Right' width='150'/>
                <ColumnDirective field='TaskName' headerText='Task Name' width='170'/>
                <ColumnDirective field='StartDate' headerText='Start Date' width='130' format='yMd' textAlign='Right' />
                <ColumnDirective field='EndDate' headerText='End Date' width='130' format='yMd' textAlign='Right' />
                <ColumnDirective field='Duration' headerText='Duration' width='100' textAlign='Right' />
            </ColumnsDirective>
        </TreeGridComponent>
    </div>
}
export default App;
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';  
@import '../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css';  
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';  
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import "../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-treegrid/styles/tailwind3.css";

Run the application

npm run dev

See Also