ui-js-tree demo

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-js-tree@0.1.2/css/ui-js-tree.css">
    <script src="https://cdn.jsdelivr.net/npm/ui-js-tree@0.1.2/lib/ui-js-tree.js"></script>
    <style>
      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      
      #ui-tree {
        display: inline-block;
        height: 100%;
        width: 100%;
        position: relative;
        overflow: auto;
      }
    </style>
  </head>

  <body>
    <div id="ui-tree"></div>
    <script src="script.js"></script>
  </body>

</html>

// Code goes here
var lots = [];
for (var i=1; i<=1000; i++)
    lots[i-1] = { title: 'superchild' + i };

var treeData = {
    title: 'root',
    children: [{
        title: 'child1',
        children: [{
            title: 'grandchild1-1'
        }, {
            title: 'grandchild1-2'
        }]
    }, {
        title: 'child2',
        children: [{
            title: 'grandchild2-1'
        }, {
            title: 'grandchild2-2',
            children: lots
        }]
    }]
};

var options = {
  initialLevel: 3,
  onSelect: function(nodeData, el) {
    console.log(nodeData);
  }
};

var tree = new UiJsTree(treeData, document.getElementById('ui-tree'), options);
tree.render();

/* Styles go here */