Components
Client Only
Installation
pnpm dlx @docyrus/cli add @docyrus/ui-tree-tableRequired Packages(2 packages)
pnpm add @dnd-kit/core @dnd-kit/utilitiesUI Primitives(4 components)
npx shadcn@latest add button dropdown-menu input tableUsage
import {
TreeTable
} from "@docyrus/ui/components/tree-table";
<TreeTable
ref={...}
data={TreeViewItem[]}
columns={TreeTableColumn[]}
nameColumnHeader={...}
getIcon={() => {}}
showExpandAll
searchPlaceholder="..."
emptyText="..."
draggable
canDropInside={() => {}}
onDataChange={(nextData: TreeViewItem, details: TreeViewMoveDetails) = void[]}
maxHeight="..."
/>API Reference
| Prop | Type | Default |
|---|---|---|
ref | Ref<HTMLDivElement> | — |
data | TreeViewItem[] | — |
columns | TreeTableColumn[] | — |
nameColumnHeader | ReactNode | — |
getIcon | (item: TreeViewItem, depth: number) => ReactNode | — |
showExpandAll | boolean | — |
searchPlaceholder | string | — |
emptyText | string | — |
draggable | boolean | — |
canDropInside | (item: TreeViewItem) => boolean | — |
onDataChange | (nextData: TreeViewItem[], details: TreeViewMoveDetails) => void | — |
maxHeight | string | — |
className | string | — |