{"id":15064758,"url":"https://github.com/mrlightful/shadcn-tree-view","last_synced_at":"2025-04-05T13:02:20.666Z","repository":{"id":256491122,"uuid":"855472358","full_name":"MrLightful/shadcn-tree-view","owner":"MrLightful","description":"A Shadcn UI component for hierarchical lists of data with nested levels that can be expanded and collapsed.","archived":false,"fork":false,"pushed_at":"2025-03-18T10:21:38.000Z","size":539,"stargazers_count":153,"open_issues_count":5,"forks_count":6,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-05T13:02:04.381Z","etag":null,"topics":["component","react","shadcn-ui","tailwind","tailwindcss","ui"],"latest_commit_sha":null,"homepage":"https://mrlightful.com/ui/tree-view","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MrLightful.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-10T23:30:19.000Z","updated_at":"2025-04-03T13:18:01.000Z","dependencies_parsed_at":"2025-01-15T12:10:45.744Z","dependency_job_id":"92ecb359-7c5d-4c0c-853e-7ddcdc834bcd","html_url":"https://github.com/MrLightful/shadcn-tree-view","commit_stats":null,"previous_names":["romatallinn/shadcn-tree-view","mrlightful/shadcn-tree-view"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrLightful%2Fshadcn-tree-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrLightful%2Fshadcn-tree-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrLightful%2Fshadcn-tree-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrLightful%2Fshadcn-tree-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MrLightful","download_url":"https://codeload.github.com/MrLightful/shadcn-tree-view/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339148,"owners_count":20923013,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","react","shadcn-ui","tailwind","tailwindcss","ui"],"created_at":"2024-09-25T00:25:56.920Z","updated_at":"2025-04-05T13:02:20.636Z","avatar_url":"https://github.com/MrLightful.png","language":"TypeScript","funding_links":[],"categories":["Libs and Components","一、核心组件与扩展库","Components","Components \u0026 Libraries"],"sub_categories":["5. 数据展示组件"],"readme":"# Tree View - [Shadcn UI](https://ui.shadcn.com/)\nThe Tree View component allows you to navigate hierarchical lists of data with nested levels that can be expanded and collapsed.\n\nBased on [implementation](https://github.com/shadcn-ui/ui/issues/355#issuecomment-1703767574) by [WangLarry](https://github.com/WangLarry) and [bytechase](https://github.com/bytechase).\n\n![demo gif](./demo.gif)\n\n### [DEMO](https://mrlightful.com/ui/tree-view)\n\n## Features\n- [x] Expand, collapse, and select items\n- [x] Custom icons per item (default, open, selected)\n- [x] Default node \u0026 leaf icons per tree view\n- [x] Action buttons (e.g. a button to add a new item)\n- [x] Click handlers per tree item and per the entire tree view.\n\n## Installation\n\n```sh\nnpx shadcn add \"https://mrlightful.com/registry/tree-view\"\n```\n\n## Usage\n\n### Props\n#### Tree View\n```tsx\ntype TreeProps = React.HTMLAttributes\u003cHTMLDivElement\u003e \u0026 {\n    data: TreeDataItem[] | TreeDataItem\n    initialSelectedItemId?: string\n    onSelectChange?: (item: TreeDataItem | undefined) =\u003e void\n    expandAll?: boolean\n    defaultNodeIcon?: any\n    defaultLeafIcon?: any\n}\n```\n\n#### Tree Item\n```tsx\ninterface TreeDataItem {\n    id: string\n    name: string\n    icon?: any\n    selectedIcon?: any\n    openIcon?: any\n    children?: TreeDataItem[]\n    actions?: React.ReactNode\n    onClick?: () =\u003e void\n    draggable?: boolean\n    droppable?: boolean\n}\n```\n\n### Basic\n```tsx\nimport { TreeView, TreeDataItem } from '@/components/ui/tree-view';\n\nconst data: TreeDataItem[] = [\n  {\n    id: '1',\n    name: 'Item 1',\n    children: [\n      {\n        id: '2',\n        name: 'Item 1.1',\n        children: [\n          {\n            id: '3',\n            name: 'Item 1.1.1',\n          },\n          {\n            id: '4',\n            name: 'Item 1.1.2',\n          },\n        ],\n      },\n      {\n        id: '5',\n        name: 'Item 1.2',\n      },\n    ],\n  },\n  {\n    id: '6',\n    name: 'Item 2',\n    draggable: true,\n    droppable: true,\n  },\n];\n\n\u003cTreeView data={data} /\u003e;\n```\n\n## Roadmap\n- [ ] Add support for disabled items (https://github.com/romatallinn/shadcn-tree-view/issues/1)\n- [ ] Add support for programmatically controlling items (https://github.com/romatallinn/shadcn-tree-view/issues/2)\n- [ ] Add support for striped and non-striped variants of the tree (https://github.com/romatallinn/shadcn-tree-view/issues/3)\n- [ ] Add support for custom item renderers (https://github.com/romatallinn/shadcn-tree-view/issues/4)\n- [ ] Add support for drag and drop? (not sure)\n\n# License\nLicensed under the MIT license, see [`LICENSE`](LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrlightful%2Fshadcn-tree-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrlightful%2Fshadcn-tree-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrlightful%2Fshadcn-tree-view/lists"}