1. Home
2. Components
3. Simple Tree View

# SimpleTreeView

## Types

```typescript
interface TreeDataItem {
  id: string;
  name: string;
  icon?: IconComponent;
  selectedIcon?: IconComponent;
  openIcon?: IconComponent;
  children?: TreeDataItem[];
  actions?: ReactNode;
  onClick?: () => void;
  draggable?: boolean;
  droppable?: boolean;
  disabled?: boolean;
}

type IconComponent = React.ComponentType<{ className?: string }>;
```

# Simple Tree View

## Props

### SimpleTreeView

| Prop | Type | Description |
| --- | --- | --- |
| data | `TreeDataItem[] | TreeDataItem` |
| initialSelectedItemId | string | Preselect an item and auto-expand ancestors |
| onSelectChange | (item?: TreeDataItem) => void | Callback when selection changes |
| expandAll | boolean | Expand all nodes initially |
| defaultNodeIcon | IconComponent | Default icon for nodes |
| defaultLeafIcon | IconComponent | Default icon for leaves |
| onDocumentDrag | (source: TreeDataItem, target: TreeDataItem) => void | Drag and drop callback |

### TreeDataItem

```ts
type TreeDataItem = {
  id: string;
  name: string;
  icon?: ComponentType<SVGProps<SVGSVGElement>>;
  selectedIcon?: ComponentType<SVGProps<SVGSVGElement>>;
  openIcon?: ComponentType<SVGProps<SVGSVGElement>>;
  children?: TreeDataItem[];
  actions?: React.ReactNode;
  onClick?: () => void;
  draggable?: boolean;
  droppable?: boolean;
  disabled?: boolean;
}
```

- Item 1
- Item 2
- Item 3

```jsx
const data = [
  { id: '1', name: 'Item 1', icon: ArrowRight,
    children: [
      { id: '2', name: 'Item 1.1', icon: AlarmClock,
        children: [
          { id: '3', name: 'Item 1.1.1', icon: Ambulance },
          { id: '4', name: 'Item 1.1.2', icon: Angry },
        ],
      },
      { id: '5', name: 'Item 1.2 (disabled)', icon: Album, disabled: true },
    ],
  }, {
    id: '6', name: 'Item 2',
    children: [
      { id: '7', name: 'Item 2.1', icon: AlignCenterHorizontal },
      { id: '8', name: 'Item 2.2', icon: Blend,
        children: [
          { id: '9', name: 'Item 2.2.1', icon: Bird },
          { id: '10', name: 'Item 2.2.2', icon: Biohazard,
            children: [
              { id: '11', name: 'Item 2.2.2.1', icon: Cannabis },
              { id: '12', name: 'Item 2.2.2.2 Item 2.2.2.2 Item 2.2.2.2 Item 2.2.2.2 Item 2.2.2.2', icon: Cannabis }
            ]
          },
        ],
      },
    ],
  },
  { id: '13', name: 'Item 3' }
];

<SimpleTreeView data={treeData} className="w-[260px]" />
```