Getting Started with React Tree Grid

23 Jul 202613 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:

Prerequisites

Requirement Version
React 15.5.4 or higher
Node.js 14.0.0 or above
Yarn (optional) 0.25 or above

React supported versions

React version Minimum Syncfusion React Tree Grid version
React v19 29.1.33 and above
React v18 20.2.36 and above
React v17 18.3.50 and above
React v16 16.2.45 and above

Browser support

Browser Supported versions
Chrome Latest
Firefox Latest
Opera Latest
Edge 13+
Internet Explorer (IE) 11+
Safari 9+
iOS Safari 9+
Android Browser / Chrome for Android 4.4+
Windows Mobile IE 11+

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, run one of the following commands based on your preferred language:

React with JavaScript

npx create-vite@latest my-app --template react

React with TypeScript

npx create-vite@latest my-app --template react-ts

During the setup process, the CLI will prompt you for a few configuration options. Select the following:

  • Which linter to use? → ESLint
  • Install with npm and start now? → Yes

Selecting Yes automatically installs the project dependencies and starts the development server.

After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step.

Then, navigate to the project directory:

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

Adding CSS reference

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/styles/treegrid/index.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-material3-theme/styles/treegrid/index.css";

Run the application

npm run dev

Registering Syncfusion license

The Syncfusion® React Tree Grid requires a valid license key to be registered in the application. To prevent license validation warnings, refer to the Syncfusion licensing documentation.

Troubleshooting

  • Grid not rendering styles: Ensure the theme CSS is imported in App.css and that you removed the default Vite CSS in index.css.
  • Trial license warning banner: Register a license key via registerLicense() from @syncfusion/ej2-base.

NOTE

Looking for the full React Tree Grid component overview, features, pricing, and documentation? Visit the React Tree Grid page.

See Also