Public
Star 历史趋势
数据来源: GitHub API · 生成自 Stargazers.cn
README.md
Tree View - Shadcn UI
The Tree View component allows you to navigate hierarchical lists of data with nested levels that can be expanded and collapsed.
Based on implementation by WangLarry and bytechase.
DEMO
Features
- Expand, collapse, and select items.
- Custom icons per item (default, open, selected).
- Default node & leaf icons per tree view.
- Action buttons (e.g. a button to add a new item).
- Click handlers per tree item and per the entire tree view.
- Drag & drop support.
- Disabled state.
- Custom item renderers.
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} />;Roadmap
- Add support for programmatically controlling items (https://github.com/romatallinn/shadcn-tree-view/issues/2).
Alternatives
License
Licensed under the MIT license, see LICENSE.