DOCSEARCHbyAlgolia
Submit Docs

shadcn-tree-view

repository·main·Indexed 18 days ago

https://github.com/mrlightful/shadcn-tree-view

A React tree view component for shadcn/ui designed for navigating hierarchical data. It supports expansion, selection, drag-and-drop, and custom item rendering via the TreeView component and TreeDataItem interface.

Tokens
877
Snippets
3
Records
4
Agent score
14%

What's inside shadcn-tree-view

  2. Use the TreeView component

    main

    To use the TreeView, import it and provide a data prop containing an array of TreeDataItem objects. You can also configure initial selection, selection change handlers, and custom icons.

    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} />;

  3. Configure TreeView props

    main

    The TreeView component accepts the following props:

    PropTypeDescription
    dataTreeDataItem[] | TreeDataItemThe hierarchical data to render.
    initialSelectedItemIdstringThe ID of the item that should be selected by default.
    onSelectChange(item: TreeDataItem | undefined) => voidCallback triggered when the selection changes.
    renderItem(params: TreeRenderItemParams) => React.ReactNodeCustom renderer for tree items.
    expandAllbooleanIf true, all nodes will be expanded by default.
    defaultNodeIconReact.ComponentType<{ className?: string }>The default icon used for nodes with children.
    defaultLeafIconReact.ComponentType<{ className?: string }>The default icon used for leaf nodes (no children).

  4. Define TreeDataItem objects

    main

    Each item in your tree data should follow the TreeDataItem interface. This allows for deep nesting, custom icons, and interactive states like drag-and-drop or disabled modes.

    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;
}