Components
Client Only
Installation
pnpm dlx @docyrus/cli add @docyrus/ui-tree-viewRequired Packages(4 packages)
pnpm add @dnd-kit/core @dnd-kit/utilities motion @emotion/is-prop-validUI Primitives(8 components)
npx shadcn@latest add badge button checkbox collapsible context-menu dropdown-menu hover-card inputUsage
import {
TreeView
} from "@docyrus/ui/components/tree-view";
<TreeView
variant="default"
size="sm"
ref={...}
data={TreeViewItem[]}
showExpandAll
showCheckboxes
checkboxPosition="left"
searchPlaceholder="..."
selectionText="..."
checkboxLabels={...}
getIcon={() => {}}
onSelectionChange={(selectedItems: TreeViewItem) = void[]}
onAction={(action: string, items: TreeViewItem) = void[]}
onCheckChange={() => {}}
onDataChange={(nextData: TreeViewItem, details: TreeViewMoveDetails) = void[]}
draggable
canDropInside={() => {}}
iconMap={...}
menuItems={TreeViewMenuItem[]}
showInfo
maxHeight="..."
defaultExpandedIds={Readonlystring[]}
expandFolderOnRowClick
onItemClick={() => {}}
selectOnRowClick
/>Variants
| Variant | Description |
|---|---|
default | Default style |
outline | Outline — border-2 border-border |
ghost | Ghost — border-transparent shadow-none |
Sizes
| Size | Description |
|---|---|
sm | Small — text-xs |
default | Default — text-sm |
lg | Large — text-base |
API Reference
| Prop | Type | Default |
|---|---|---|
variant | "default" | "outline" | "ghost" | "default" |
size | "sm" | "default" | "lg" | "default" |
ref | Ref<HTMLDivElement> | — |
data | TreeViewItem[] | — |
showExpandAll | boolean | — |
showCheckboxes | boolean | — |
checkboxPosition | TreeViewCheckboxPosition | — |
searchPlaceholder | string | — |
selectionText | string | — |
checkboxLabels | { check: string; uncheck: string } | — |
getIcon | (item: TreeViewItem, depth: number) => ReactNode | — |
onSelectionChange | (selectedItems: TreeViewItem[]) => void | — |
onAction | (action: string, items: TreeViewItem[]) => void | — |
onCheckChange | (item: TreeViewItem, checked: boolean) => void | — |
onDataChange | (nextData: TreeViewItem[], details: TreeViewMoveDetails) => void | — |
draggable | boolean | — |
canDropInside | (item: TreeViewItem) => boolean | — |
iconMap | TreeViewIconMap | — |
menuItems | TreeViewMenuItem[] | — |
showInfo | boolean | — |
maxHeight | string | — |
defaultExpandedIds | ReadonlyArray<string> | — |
expandFolderOnRowClick | boolean | — |
onItemClick | (item: TreeViewItem) => void | — |
selectOnRowClick | boolean | — |
className | string | — |