How do I load tree data lazily?

Set items to a function that returns a Promise, or use the expanding event to load child nodes on demand.

How do I enable drag and drop?

Set allowDrag = true and allowDrop = true to enable drag-and-drop reordering.

smart-ui

JavaScript

Angular

Vue

React

Getting Started with React Tree Component

Smart UI React targets React 18+ and current Node LTS for tooling; use TypeScript templates when you want typed props and events.

Demo source (Smart UI repo): react/source/tree/overview/App.jsx

1 Create a Vite + React + TypeScript app

npm create vite@latest my-smart-app -- --template react-ts

```
cd my-smart-app
```
then
```
npm install
```

2 Install Smart UI for React

npm install smart-webcomponents-react

3 Import styles and render the component

Open src/App.tsx (or App.jsx if you chose JavaScript). The snippet below matches Smart UI React demos for this widget:

import 'smart-webcomponents-react/source/styles/smart.default.css';
import './App.css';
import React from "react";
import ReactDOM from 'react-dom/client';
import { Tree, TreeItem, TreeItemsGroup } from 'smart-webcomponents-react/tree';

const App = () => {
	return (
		<div>
			<Tree id="tree">
				<TreeItemsGroup> <i className="material-icons">&#xE53F;</i> Attractions
					<TreeItem>Movies</TreeItem>
					<TreeItem>Circus</TreeItem>
					<TreeItem>Concerts</TreeItem>
					<TreeItem>Monuments</TreeItem>
				</TreeItemsGroup>
				<TreeItemsGroup> <i className="material-icons">&#xE56C;</i> Dining
					<TreeItem>Restaurants</TreeItem>
					<TreeItem>Caf&eacute;s</TreeItem>
					<TreeItem>Bars</TreeItem>
				</TreeItemsGroup>
				<TreeItemsGroup> <i className="material-icons">&#xE80C;</i> Education
					<TreeItem>Schools</TreeItem>
					<TreeItem>Colleges</TreeItem>
					<TreeItem>Universities</TreeItem>
					<TreeItem>Educational courses</TreeItem>
				</TreeItemsGroup>
				<TreeItemsGroup> <i className="material-icons">&#xEB41;</i> Family
					<TreeItem>Babysitting</TreeItem>
					<TreeItem>Family trips</TreeItem>
					<TreeItem>Theme parks</TreeItem>
				</TreeItemsGroup>
				<TreeItemsGroup> <i className="material-icons">&#xE87D;</i> Health
					<TreeItem>Hospitals</TreeItem>
					<TreeItem>Family physicians</TreeItem>
					<TreeItem>Optics</TreeItem>
				</TreeItemsGroup>
				<TreeItemsGroup> <i className="material-icons">&#xE30A;</i> Office
					<TreeItem>Offices for rent</TreeItem>
					<TreeItem>Office equipment</TreeItem>
					<TreeItem>Repair works</TreeItem>
				</TreeItemsGroup>
				<TreeItemsGroup> <i className="material-icons">&#xE25C;</i> Promotions
					<TreeItem>Sales</TreeItem>
					<TreeItem>Malls</TreeItem>
					<TreeItem>Collective buying</TreeItem>
				</TreeItemsGroup>
				<TreeItemsGroup> <i className="material-icons">&#xE03E;</i> Radio
					<TreeItem>Available stations</TreeItem>
					<TreeItem>Search</TreeItem>
				</TreeItemsGroup>
				<TreeItemsGroup> <i className="material-icons">&#xE7E9;</i> Recipes
					<TreeItem>With meat</TreeItem>
					<TreeItem>With fish</TreeItem>
					<TreeItem>Vegetarian recipes</TreeItem>
					<TreeItem>Vegan recipes</TreeItem>
					<TreeItem>Desserts</TreeItem>
					<TreeItem>Chef's recommendations</TreeItem>
				</TreeItemsGroup>
				<TreeItemsGroup> <i className="material-icons">&#xE52F;</i> Sports
					<TreeItem>Football</TreeItem>
					<TreeItem>Basketball</TreeItem>
					<TreeItem>Tennis</TreeItem>
					<TreeItem>Baseball</TreeItem>
					<TreeItem>Cycling</TreeItem>
				</TreeItemsGroup>
				<TreeItemsGroup> <i className="material-icons">&#xE53D;</i> Travel
					<TreeItem>Local destinations</TreeItem>
					<TreeItem>Book tickets</TreeItem>
					<TreeItem>Organised travel</TreeItem>
				</TreeItemsGroup>
			</Tree>
		</div>
	);
}



export default App;

4 Run the dev server

npm run dev

Open the URL Vite prints (often http://localhost:5173/).

Alternative: Next.js

Create an app with npx create-next-app@latest (Pages Router or App Router). Install the same package (npm install smart-webcomponents-react), then reuse the imports and default export from step 3 in pages/_app.tsx, the App Router root app/layout.tsx, or your top-level layout component so styles and the widget tree load once.

Common Use Cases

Load hierarchical data

Populate tree with nested items

tree.dataSource = [{
  label: 'Parent',
  items: [
    { label: 'Child 1' },
    { label: 'Child 2' }
  ]
}];

Expand/collapse nodes

Programmatically control node state

tree.expandItem('0'); // Expand first item
tree.collapseItem('0'); // Collapse it

Handle selection

Respond to tree item selection

tree.addEventListener('change', (e) => {
  console.log('Selected:', e.detail.value);
});

Troubleshooting

How do I load tree data lazily?: Set items to a function that returns a Promise, or use the expanding event to load child nodes on demand.
How do I enable drag and drop?: Set allowDrag = true and allowDrop = true to enable drag-and-drop reordering.

TypeScript Support

Types ship with smart-webcomponents-react. Import the component and prop types:

import type { Tree, TreeProps } from 'smart-webcomponents-react/tree';

The generated wrappers expose on* callbacks (for example onChange) whose arguments are standard DOM Event values unless the widget typings narrow them further.

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.