Interactive Tree Structure for Hierarchical Data – Plain Tree

Plain Tree is a lightweight JavaScript library that helps you create interactive tree structures without external libraries or frameworks.

The library renders hierarchical data with expandable and collapsible nodes. It supports dynamic node operations through a context menu system. You control tree expansion depth and receive node click events through callback functions.

Plain Tree works directly with JavaScript objects structured as parent-child relationships. Each node contains an ID, display text, and optional child nodes. This structure maps cleanly to common data hierarchies like file systems, organization charts, and category trees.

How to use it:

1. Link the Plain Tree’s JavaScript and Stylesheet in your HTML:

<link rel="stylesheet" href="plain-tree.css"/>
<script src="plain-tree.js"></script>

2. Create a container where the tree will be rendered:

<div id="tree"></div>

3. Plain Tree uses a simple JSON format to define hierarchical data. Each node can have an id, text, and children array. Here’s an example:

const data = [
  {
    id: 1,
    text: 'Node 1',
    children: [
      {
        id: 11,
        text: 'Node 1.1',
        children: [
          {  id: 111, text: 'Node 1.1.1' },
          {  id: 112, text: 'Node 1.1.2', children: [{  id: 1121, text: 'Node 1.1.2.1'}] }
        ]
      },
      {  id: 12, text: 'Node 1.2' }
    ]
  },
  {
    id: 2,
    text: 'Node 2',
    children: [
      {  id: 21, text: 'Node 2.1' },
      {  id: 22, text: 'Node 2.2' }
    ]
  },
  // more nodes here
];

4. Initialize the tree and pass the data to render the hierarchical structure:

const tree = new PlainTree('#tree', {
    data,
});

5. By default, the tree’s nodes are collapsed. You can control the default expansion depth by passing the depth option:

const tree = new PlainTree('#tree',{
  data,
  depth: 2,
});

6. You can define custom context menus that appear when right-clicking a node. This can be useful for adding, updating, or removing nodes interactively:

const tree = new PlainTree('#tree',{
  data,
  depth: 2,
  contextMenu: [{
    text: 'Add',
    onClick: (node) => {
      const rnd = Math.random();
      const newNode = { id: rnd, text: rnd, children: [] };
      tree.addNode(newNode, node.id);
    }
  },{
    text: 'Update',
    onClick: (node) => {
      node.text = 'New Node';
      tree.updateNode(node);
    }
  },{
    text: 'Delete',
    onClick: (node) => {
      tree.removeNode(node);
    }
  }]
});

7. You can define callback functions to handle events such as rendering or clicking nodes. For example:

const tree = new PlainTree('#tree',{
  data,
  onRendered: null,
  onNodeClick: (id) => {
    console.log('id=',id);
  }, 
});

8. Available API methods to control the tree programmatically:

// Expands the tree. If a node is provided, it expands that specific node. 
// Otherwise, it expands the entire tree.
tree.expand(node)
// Collapses the tree. 
// Similar to 'expand', it acts on a specific node or the whole tree.
tree.collapse(node)
// Adds a 'node' under a 'parentId'.
tree.addNode(node, parentId)
// Updates a node.
tree.updateNode(node)
// Removes a node.
tree.removeNode(node)