Aller au contenu principal

Tree Component

Description​

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

Props​

PropTypeDefaultDescription
nodesTreeNode[][]Array of tree nodes to display.
onDoubleClick(event, node) => voidundefinedCallback triggered on double-clicking a node.
onMouseDown(event, node) => voidundefinedCallback triggered when mouse is pressed.
onTouchStart(event, node) => voidundefinedCallback triggered when touch starts on a node.
onTouchEnd() => voidundefinedCallback triggered when touch ends.

Example Usage​

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