Skip to content

Tree Component

Description

The Tree component is used to display hierarchical data in an expandable and collapsible format.

Props

Prop Type Default Description
nodes TreeNode[] [] Array of tree nodes to display.
onDoubleClick (event, node) => void undefined Callback triggered on double-clicking a node.
onMouseDown (event, node) => void undefined Callback triggered when mouse is pressed.
onTouchStart (event, node) => void undefined Callback triggered when touch starts on a node.
onTouchEnd () => void undefined Callback triggered when touch ends.

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import { Tree } from "@nomana-it/liberty-core"

const treeData = [
  { id: "1", label: "Root", children: [
      { id: "1-1", label: "Child 1" },
      { id: "1-2", label: "Child 2", children: [
          { id: "1-2-1", label: "Grandchild 1" },
      ]},
  ]},
];

export const TreeExample = () => {
  return <Tree nodes={treeData} />;
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core