Getting started with React TreeView component
3 Aug 202624 minutes to read
This section explains how to create a simple TreeView component and configure its core functionalities in a React application.
Prerequisites
System requirements for Syncfusion® React UI components
Set up the Vite project
To create a new Vite project, use one of the commands that are specific to either NPM or Yarn.
npm create vite@latest my-project -- --template reactyarn create vite my-project --template reactAfter running the command, you will be prompted with a series of interactive questions to configure your project. Select the appropriate options for each prompt:
-
Select a linter to use: Choose the linter for your project (for example,
ESLint). -
Install with npm and start now?: Type
Yesto proceed with installing the dependencies and automatically start the development server, orNoto install dependencies manually later.
Navigate into the project directory with:
cd my-project
Add Syncfusion® React packages
Syncfusion® React component packages are available at npmjs.com. To use Syncfusion® React components in the project, install the corresponding npm package.
To install the React TreeView component package, use the following command:
npm install @syncfusion/ej2-react-navigationsyarn add @syncfusion/ej2-react-navigationsImport Syncfusion® CSS styles
Themes for Syncfusion® React components can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, see the themes documentation.
This guide uses the Tailwind 3 theme as an example, sourced from the theme package. In this package, each component includes an index.css file that automatically loads all the required dependency styles. To install the Tailwind 3 theme package, use the following command:
npm install @syncfusion/ej2-tailwind3-themeyarn add @syncfusion/ej2-tailwind3-themeBy default, Vite projects include default styles in the src/index.css and src/App.css files. These default styles may conflict with Syncfusion component styles. Clear all content from both files to prevent style conflicts.
The required styles for the TreeView component are imported in the src/App.css file:
@import "@syncfusion/ej2-tailwind3-theme/styles/treeview/index.css";You can also refer to the combined CSS file for all Syncfusion components in your application. For more information, see the documentation on referring themes through npm packages.
Add TreeView component
Replace the existing boilerplate content in src/App.jsx with the following code to add the TreeView component to the application.
TreeView can load data from local data sources or remote data services using the dataSource property, which is a member of the fields property. The fields object maps your data keys to TreeView properties: id maps the unique identifier, text maps the display label, and child maps the nested children array. The dataSource property supports arrays of JavaScript objects and DataManager.
import * as React from 'react';
import './App.css';
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
function App() {
const hierarchicalData = [
{
id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: '7-Zip' },
{ id: '01-01-02', name: 'Git' },
{ id: '01-01-03', name: 'IIS Express' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
{
id: '02', name: 'Local Disk (D:)',
subChild: [
{
id: '02-01', name: 'Personals',
subChild: [
{ id: '02-01-01', name: 'My photo.png' },
{ id: '02-01-02', name: 'Rental document.docx' },
{ id: '02-01-03', name: 'Pay slip.pdf' },
]
},
{
id: '02-02', name: 'Projects',
subChild: [
{ id: '02-02-01', name: 'ASP Application' },
{ id: '02-02-02', name: 'TypeScript Application' },
{ id: '02-02-03', name: 'React Application' },
]
},
{
id: '02-03', name: 'Office',
subChild: [
{ id: '02-03-01', name: 'Work details.docx' },
{ id: '02-03-02', name: 'Weekly report.docx' },
{ id: '02-03-03', name: 'Wish list.csv' },
]
},
]
},
{
id: '03', name: 'Local Disk (E:)', icon: 'folder',
subChild: [
{
id: '03-01', name: 'Pictures',
subChild: [
{ id: '03-01-01', name: 'Wind.jpg' },
{ id: '03-01-02', name: 'Stone.jpg' },
{ id: '03-01-03', name: 'Home.jpg' },
]
},
{
id: '03-02', name: 'Documents',
subChild: [
{ id: '03-02-01', name: 'Environment Pollution.docx' },
{ id: '03-02-02', name: 'Global Warming.ppt' },
{ id: '03-02-03', name: 'Social Network.pdf' },
]
},
{
id: '03-03', name: 'Study Materials',
subChild: [
{ id: '03-03-01', name: 'UI-Guide.pdf' },
{ id: '03-03-02', name: 'Tutorials.zip' },
{ id: '03-03-03', name: 'TypeScript.7z' },
]
},
]
}
];
const fields = { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
return (
// specifies the tag to render the TreeView component
<TreeViewComponent fields={fields}/>
);
}
export default App;import * as React from 'react';
import './App.css';
import { TreeViewComponent, FieldsSettingsModel } from '@syncfusion/ej2-react-navigations';
function App() {
const hierarchicalData: { [key: string]: Object }[] = [
{
id: '01', name: 'Local Disk (C:)', expanded: true,
subChild: [
{
id: '01-01', name: 'Program Files',
subChild: [
{ id: '01-01-01', name: '7-Zip' },
{ id: '01-01-02', name: 'Git' },
{ id: '01-01-03', name: 'IIS Express' },
]
},
{
id: '01-02', name: 'Users', expanded: true,
subChild: [
{ id: '01-02-01', name: 'Smith' },
{ id: '01-02-02', name: 'Public' },
{ id: '01-02-03', name: 'Admin' },
]
},
{
id: '01-03', name: 'Windows',
subChild: [
{ id: '01-03-01', name: 'Boot' },
{ id: '01-03-02', name: 'FileManager' },
{ id: '01-03-03', name: 'System32' },
]
},
]
},
{
id: '02', name: 'Local Disk (D:)',
subChild: [
{
id: '02-01', name: 'Personals',
subChild: [
{ id: '02-01-01', name: 'My photo.png' },
{ id: '02-01-02', name: 'Rental document.docx' },
{ id: '02-01-03', name: 'Pay slip.pdf' },
]
},
{
id: '02-02', name: 'Projects',
subChild: [
{ id: '02-02-01', name: 'ASP Application' },
{ id: '02-02-02', name: 'TypeScript Application' },
{ id: '02-02-03', name: 'React Application' },
]
},
{
id: '02-03', name: 'Office',
subChild: [
{ id: '02-03-01', name: 'Work details.docx' },
{ id: '02-03-02', name: 'Weekly report.docx' },
{ id: '02-03-03', name: 'Wish list.csv' },
]
},
]
},
{
id: '03', name: 'Local Disk (E:)', icon: 'folder',
subChild: [
{
id: '03-01', name: 'Pictures',
subChild: [
{ id: '03-01-01', name: 'Wind.jpg' },
{ id: '03-01-02', name: 'Stone.jpg' },
{ id: '03-01-03', name: 'Home.jpg' },
]
},
{
id: '03-02', name: 'Documents',
subChild: [
{ id: '03-02-01', name: 'Environment Pollution.docx' },
{ id: '03-02-02', name: 'Global Warming.ppt' },
{ id: '03-02-03', name: 'Social Network.pdf' },
]
},
{
id: '03-03', name: 'Study Materials',
subChild: [
{ id: '03-03-01', name: 'UI-Guide.pdf' },
{ id: '03-03-02', name: 'Tutorials.zip' },
{ id: '03-03-03', name: 'TypeScript.7z' },
]
},
]
}
];
const fields: FieldsSettingsModel = { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' };
return (
// specifies the tag to render the TreeView component
<TreeViewComponent fields={fields}/>
);
}
export default App;Run the application
To run the project, use the following command:
npm run devyarn run devRefer to the React TreeView feature tour page for its groundbreaking feature representations. You can also explore our React TreeView component example that shows how to render the TreeView in React.