Vertical Hierarchical Tree In Vanilla JavaScript – TreeX

TreeX is a vanilla JavaScript library that lets you create a vertical tree structure representing hierarchical data on the web app.

Features:

• Collapsible
• Expandable
• Filterable
• Selectable
• Easy to extend

How to use it:

1. Import the TreeX.js JavaScript library into the html.

<script src="treex.js"></script>

2. Define your own nodes to be displayed in the tree.

const node1 = {
      data: "JavaScript",
      children: [node2, node3, node4]
}
const node2 = {
      data: "Vanilla",
      children: []
}
const node3 = {
      data: "jQuery",
      children: []
}
const node4 = {
      data: "React",
      children: []
}
// ...

3. Create a container to hold the tree.

<div id="example"></div>

4. Render a tree inside the container you just created.

let tree = treex.Tree.createTree(node1);
let element = treex.TreeX.createTree(tree, { document });
let example = document.querySelector('#example');
example.appendChild(element);

5. Create an input filed to filter through the data.

<input class="filter" type="text" placeholder="filter"/>

let filterEl = document.querySelector('input.filter');
  filterEl.oninput = () => {
    tree.getNodes().forEach((n) => {
      if(n.data.toLowerCase().includes(filterEl.value.toLowerCase())){
        n.setVisibility(true);
      }else{
        n.setVisibility(false);
      }
    });
};

6. Remove a node from the tree.

// remove node 1 
example.children[0].remove();

7. Determine whether to hide the root node.

let element = treex.TreeX.createTree(tree, { document, trueORfalse });

Changelog:

05/11/2021

• Bugfixes