Getting Started with React Tree Grid

6 Jul 202611 minutes to read

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

For a quick start with React Tree Grid, 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 Tree Grid packages

To install the Tree Grid component, use the following command:

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

Before including Syncfusion styles, make sure to remove the default styles defined in index.css. This helps prevent unintended style overrides and ensures that Syncfusion components render correctly.

Adding CSS reference

You can add the CSS files required for the Syncfusion React Tree Grid component using one of the following methods.

Option 1: Add CSS references from a theme package

Themes for Syncfusion® React Tree Grid component can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Material 3 theme package using the following command:

npm install @syncfusion/ej2-material3-theme --save

Then add the following CSS reference to the src/App.css file:

@import "../node_modules/@syncfusion/ej2-material3-theme/treegrid/treegrid/index.css";

Option 2: Add CSS references from component packages

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 Tree Grid component

The tree grid 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