# TreeView

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

## Installation

```tsx
import { TreeView } from 'uxp/components';
```

## Signature

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

## Examples

```tsx
<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\[\]](https://help.iviva.com/uxp/v5/additional-resources/types/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](https://help.iviva.com/uxp/v5/additional-resources/types/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](https://help.iviva.com/uxp/v5/additional-resources/types/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](https://help.iviva.com/uxp/v5/additional-resources/types/treeviewprops)
* [TreeNode](https://help.iviva.com/uxp/v5/additional-resources/types/treenode)
* [TreeViewStyles](https://help.iviva.com/uxp/v5/additional-resources/types/treeviewstyles)
* [ExtendedTreeNode](https://help.iviva.com/uxp/v5/additional-resources/types/extendedtreenode)
* [CustomActionButton](https://help.iviva.com/uxp/v5/additional-resources/types/customactionbutton)
* [DragState](https://help.iviva.com/uxp/v5/additional-resources/types/dragstate)
* [DropPosition](https://help.iviva.com/uxp/v5/additional-resources/types/dropposition)
* [TreeViewHandle](https://help.iviva.com/uxp/v5/additional-resources/types/treeviewhandle)