https://github.com/mrlightful/shadcn-tree-view
A Shadcn UI component for hierarchical lists of data with nested levels that can be expanded and collapsed.
https://github.com/mrlightful/shadcn-tree-view
component react shadcn-ui tailwind tailwindcss ui
Last synced: about 1 year ago
JSON representation
A Shadcn UI component for hierarchical lists of data with nested levels that can be expanded and collapsed.
- Host: GitHub
- URL: https://github.com/mrlightful/shadcn-tree-view
- Owner: MrLightful
- License: mit
- Created: 2024-09-10T23:30:19.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-18T10:21:38.000Z (over 1 year ago)
- Last Synced: 2025-04-05T13:02:04.381Z (about 1 year ago)
- Topics: component, react, shadcn-ui, tailwind, tailwindcss, ui
- Language: TypeScript
- Homepage: https://mrlightful.com/ui/tree-view
- Size: 526 KB
- Stars: 153
- Watchers: 3
- Forks: 6
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-shadcn-ui - Link - 09-23 | (Libs and Components)
- awesome-shadcn-ui - shadcn-tree-view - 层级树组件，支持节点展开/折叠、勾选、拖拽排序，适配分类数据展示。 (一、核心组件与扩展库 / 5. 数据展示组件)
- awesome-shadcn-ui-browser - Link - 09-23 | (Libs and Components)
- awesome-shadcnui - Github - view) | ★215 | (Components & Libraries)
README
# Tree View - [Shadcn UI](https://ui.shadcn.com/)
The Tree View component allows you to navigate hierarchical lists of data with nested levels that can be expanded and collapsed.
Based on [implementation](https://github.com/shadcn-ui/ui/issues/355#issuecomment-1703767574) by [WangLarry](https://github.com/WangLarry) and [bytechase](https://github.com/bytechase).
### [DEMO](https://mrlightful.com/ui/tree-view)
## Features
- [x] Expand, collapse, and select items
- [x] Custom icons per item (default, open, selected)
- [x] Default node & leaf icons per tree view
- [x] Action buttons (e.g. a button to add a new item)
- [x] Click handlers per tree item and per the entire tree view.
## Installation
```sh
npx shadcn add "https://mrlightful.com/registry/tree-view"
```
## Usage
### Props
#### Tree View
```tsx
type TreeProps = React.HTMLAttributes & {
data: TreeDataItem[] | TreeDataItem
initialSelectedItemId?: string
onSelectChange?: (item: TreeDataItem | undefined) => void
expandAll?: boolean
defaultNodeIcon?: any
defaultLeafIcon?: any
}
```
#### Tree Item
```tsx
interface TreeDataItem {
id: string
name: string
icon?: any
selectedIcon?: any
openIcon?: any
children?: TreeDataItem[]
actions?: React.ReactNode
onClick?: () => void
draggable?: boolean
droppable?: boolean
}
```
### Basic
```tsx
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',
},
],
},
{
id: '6',
name: 'Item 2',
draggable: true,
droppable: true,
},
];
;
```
## Roadmap
- [ ] Add support for disabled items (https://github.com/romatallinn/shadcn-tree-view/issues/1)
- [ ] Add support for programmatically controlling items (https://github.com/romatallinn/shadcn-tree-view/issues/2)
- [ ] Add support for striped and non-striped variants of the tree (https://github.com/romatallinn/shadcn-tree-view/issues/3)
- [ ] Add support for custom item renderers (https://github.com/romatallinn/shadcn-tree-view/issues/4)
- [ ] Add support for drag and drop? (not sure)
# License
Licensed under the MIT license, see [`LICENSE`](LICENSE).