TreeView

TreeView component renders a hierarchical structure of nodes with optional icons, labels, and selectable functionality.

Installation

import { TreeView } from 'uxp/components';

Signature

const TreeView: React.ForwardRefExoticComponent<React.RefAttributes<TreeViewHandle> & TreeViewProps>

Examples

<TreeView
   items={[
     { id: '1', label: 'Root Node', children: [{ id: '1-1', label: 'Child Node' }] }
   ]}
   selected={selectedNode}
   onSelect={handleSelectNode}
   showPath={true}
   styles={{
     nodeBGColor: '#f0f0f0',
     labelTextColor: '#333',
   }}
/>

Properties

Name	Type	Mandatory	Default Value	Example Value
items	TreeNode[]	Yes	-	-
noItemsMessage	string	No	-	-
showPath	boolean	No	-	-
renderRootNodesHorizontally	boolean	No	-	-
multiSelect	boolean	No	-	-
selected	TreeNode | TreeNode[]	No	-	-
onSelect	(selected: TreeNode | TreeNode[]) => void	No	-	-
styles	TreeViewStyles	No	-	-
showHeader	boolean	No	-	-
title	string | React.ReactNode	No	-	-
enableSearch	boolean	No	-	-
onSearch	(query: string) => void	No	-	-
expandAllNodes	boolean	No	-	-
enableAdd	boolean	No	-	-
addButtonLabel	string	No	-	-
enableEdit	boolean	No	-	-
enableDelete	boolean	No	-	-
onAdd	(parentNode?: ExtendedTreeNode) => void	No	-	-
onEdit	(node: ExtendedTreeNode) => void	No	-	-
onDelete	(id: string) => void	No	-	-
customActions	(node: ExtendedTreeNode) => CustomActionButton[]	No	-	-
showActionButtonOnlyOnHover	boolean	No	-	-
actionButtonsPosition	'inline' | 'end'	No	-	-
renderLabel	(node: TreeNode) => React.ReactNode	No	-	-
renderDetails	(node: TreeNode) => React.ReactNode	No	-	-
loading	boolean	No	-	-
enableDrag	boolean	No	-	-
enableDrop	boolean	No	-	-
enableReordering	boolean	No	-	-
enableHierarchyChange	boolean	No	-	-
maxDepth	number	No	-	-
reorderLoading	boolean	No	-	-
onReorder	(reorderedNodes: TreeNode[], draggedNode: TreeNode, newIndex: number, parentId?: string) => Promise	No	-	-
onHierarchyChange	(movedNode: TreeNode, newParentId: string | null, newIndex: number) => void | Promise	No	-	-
disableInternalDndContext	boolean	No	-	-
externalDragState	DragState	No	-	-
idPrefixForComparison	string	No	-	-

Ref Handlers

Available methods through ref:

Method	Type	Description
triggerDrop	(sourceNodeId: string, targetNodeId: string, dropPosition: DropPosition) => Promise	Programmatically trigger a drop operation

Related Types

• TreeViewProps

• TreeNode

• TreeViewStyles

• ExtendedTreeNode

• CustomActionButton

• DragState

• DropPosition

• TreeViewHandle