عرض الشجرة

يعرض عرض الشجرة البيانات الهرمية بوصفها بنية شجرية قابلة للطيّ مع دعم كامل لـ RTL.

Loading demo: tree-view-real-world

Tree View displays hierarchical data as a collapsible tree structure with full RTL support.

التثبيت

npx sdaia-ui@latest add tree-view

import { TreeView } from "@/components/ui/tree-view"

<TreeView data={[]} />

عرض شجري هرمي مع عقد قابلة للتوسيع والطيّ.

Loading demo: tree-view-default

عرض شجري مع اختيار خانات لحالات الاختيار المتعدد.

Loading demo: tree-view-checkbox

عرض شجري مع أيقونات تُعرض بجانب كل تسمية عقدة.

Loading demo: tree-view-icons

خصائص مكوّن TreeView.

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