Tree View

The tree view is a component that displays a hierarchical list of items. Each item can have a list of children that can be expanded or collapsed.

Item 2 (draggable)

Installation

npx shadcn add "https://mrlightful.com/registry/tree-view"

Usage

Props

Tree View

type TreeProps = React.HTMLAttributes<HTMLDivElement> & {
    data: TreeDataItem[] | TreeDataItem
    initialSelectedItemId?: string
    onSelectChange?: (item: TreeDataItem | undefined) => void
    renderItem?: (params: TreeRenderItemParams) => React.ReactNode
    expandAll?: boolean
    defaultNodeIcon?: React.ComponentType<{ className?: string }>
    defaultLeafIcon?: React.ComponentType<{ className?: string }>
}

Tree Item

interface TreeDataItem {
    id: string
    name: string
    icon?: React.ComponentType<{ className?: string }>
    selectedIcon?: React.ComponentType<{ className?: string }>
    openIcon?: React.ComponentType<{ className?: string }>
    children?: TreeDataItem[]
    actions?: React.ReactNode
    onClick?: () => void
    draggable?: boolean
    droppable?: boolean
    disabled?: boolean
    className?: string
}

Basic

import { TreeView, TreeDataItem } from '@/components/ui/tree-view'
 
const data: TreeDataItem[] = [
    {
        id: '1',
        name: 'Item 1',
        children: [
            {
                id: '2',
                name: 'Item 1.1',
                children: [
                    {
                        id: '3',
                        name: 'Item 1.1.1'
                    },
                    {
                        id: '4',
                        name: 'Item 1.1.2'
                    }
                ]
            },
            {
                id: '5',
                name: 'Item 1.2 (disabled)',
                disabled: true
            }
        ]
    },
    {
        id: '6',
        name: 'Item 2 (draggable)',
        draggable: true
    }
]
 
;<TreeView data={data} />