Vertical Hierarchical Tree In Vanilla JavaScript – TreeX

Category: Javascript | May 11, 2021
Author: qwefgh90
Views Total: 84 views
Official Page: Go to website
Last Update: May 11, 2021
License: MIT

Preview:

Vertical Hierarchical Tree In Vanilla JavaScript – TreeX

Description:

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

You Might Be Interested In:


Leave a Reply