SimpleTreeView

Types

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

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

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]" />