Tree View Component

A tree component that renders a navigable list of nodes with selection, expansion, and keyboard interaction. Supports controlled and uncontrolled modes for expanded and selected node IDs.

Usage

To import and use the Tree View component in your application, use the following code snippet:

import { TreeView } from "@syncfusion/react-navigations";

interface Node { id: string; label: string; parentId?: string | null; }
export default function App() {
  const dataSource: Node[] = [
      { id: '1', label: 'Documents' },
      { id: '2', label: 'Reports', parentId: '1' },
      { id: '3', label: 'Invoices', parentId: '1' },
      { id: '4', label: 'Downloads' },
      { id: '5', label: 'Pictures' }
  ];
  return (
      <TreeView dataSource={dataSource} defaultExpandedIds={['1']} />
  );
}

import { TreeView } from "@syncfusion/react-navigations";

interface Node { id: string; label: string; parentId?: string | null; }
export default function App() {
  const dataSource: Node[] = [
      { id: '1', label: 'Documents' },
      { id: '2', label: 'Reports', parentId: '1' },
      { id: '3', label: 'Invoices', parentId: '1' },
      { id: '4', label: 'Downloads' },
      { id: '5', label: 'Pictures' }
  ];
  return (
      <TreeView dataSource={dataSource} defaultExpandedIds={['1']} />
  );
}

Demos

Explore the demos of the React Tree View component. Refer to this page.

Props

The following table outlines the props for the Tree View component:

Name	Type	Default	Description
autoCheck	boolean	false	Specifies whether toggling a node's checkbox cascades the selection to its descendants and recomputes the ancestor selection state.
checkDisabledChildren	boolean	false	Specifies whether disabled children participate in `autoCheck` propagation.
checkOnClick	boolean	false	Specifies whether clicking the row's content area also toggles the row's selection when `selectionMode` is `'Checkbox'`.
dataSource	DataManager \| T[]	-	Specifies the tree datasource.
defaultExpandedIds	(string \| number)[]	-	Specifies the initial list of expanded node IDs used when no expanded list is supplied.
defaultSelectedIds	(string \| number)[]	-	Specifies the initial list of selected node IDs used when no selected list is supplied.
disabled	boolean	false	Specifies whether the TreeView is disabled, preventing user interaction with any row.
editable	boolean	false	Specifies whether inline label editing is enabled for this TreeView.
expandOn	ExpandOnAction	'None'	Specifies the action that triggers expansion or collapse on a row.
expandedIds	(string \| number)[]	-	Specifies the list of expanded node IDs.
fields	TreeViewFieldMapping	-	Specifies the mapping of datasource field names to TreeView fields.
fullRowNavigable	boolean	false	Specifies whether the entire row becomes the navigable click surface for a node that has a `navigateUrl`.
fullRowSelect	boolean	true	Specifies whether the entire row owns the click and interaction surface.
query	Query	new Query()	Specifies the `Query` applied to the root-level DataManager fetch.
selectedIds	(string \| number)[]	-	Specifies the list of selected node IDs.
selectionMode	SelectionMode	'Single'	Specifies the selection behavior.
sortOrder	SortOrder	'SortOrder.None'	Specifies the sort order applied to sibling nodes.
textWrap	boolean	true	Specifies whether the node label wraps onto multiple lines when it exceeds the row width.

Methods

The following table outlines the methods for the Tree View component:

Name	Parameters	Returns	Description
collapseAll	ids? : Array<string \| number>	void	Collapses every currently-expanded node. Params: ids: Optional subset of root ids to collapse; when omitted, every expanded id is collapsed.
expandAll	ids? : Array<string \| number>	void	Expands every loaded node whose ancestors are already present in the data source. Params: ids: Optional subset of root ids to expand; when omitted, all ids are expanded.

Events

The following table outlines the events for the Tree View component: