Tree View displays hierarchical data as a collapsible tree structure with full RTL support.
Loading demo: tree-view-real-world
npx sdaia-ui@latest add tree-view
import { TreeView } from "@/components/ui/tree-view"<TreeView data={[]} />Hierarchical tree view with expandable and collapsible nodes.
Loading demo: tree-view-default
Tree view with checkbox selection for multi-select use cases.
Loading demo: tree-view-checkbox
Tree view with icons displayed alongside each node label.
Loading demo: tree-view-icons
Props for the TreeView component.
Prop | Type | Default | Required |
|---|---|---|---|
items | TreeViewNode[] | - | required |
expandedIds | string[] | - | optional |
defaultExpandedIds | string[] | [] | optional |
onExpandedIdsChange | (expandedIds: string[]) => void | - | optional |
selectedId | string | - | optional |
defaultSelectedId | string | - | optional |
onSelectedIdChange | (id: string) => void | - | optional |
baseLevel | 1 | 2 | 3 | 4 | 1 | optional |