JSFiddle - React, Tailwind, and code Playground

by Guruprasad Gopalkrishna

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<body ng-app="myApp">
    <div ng-controller="myAppController">

<script type="text/ng-template"  id="tree_item.html">

    <tr style="width:100%">
        <td><i class="fa" ng-class="data.folderClass" ng-click="toggleChildren(data)"></i></td>
        <td>
                {{data.name}}
            <div id="expanded-data" ng-if="data.childrenVisible">
                <table class="table table-striped" id="nested-table">
                        <div ng-repeat="data in data.nodes" ng-include="'tree_item.html'"></div>
                </table>
            </div>
        </td>
    </tr>
    
</script>


<table class="table table-striped">
     <thead>
        <tr>
            <th style="width:30px;"><i ng-click="loadItems()" class="fa fa-refresh blueicon"></i></th>
            <th style="width:auto">Data tree</th>
        </tr>
    </thead>
    <tbody ng-repeat="data in treeData" ng-include="'tree_item.html'">
    
    </tbody>
    
</table>
</div>

CSS

#nested-table{
    margin-bottom: 0px;
}
#expanded-data {
    margin-left: 20px;
}

JavaScript

angular.module('myApp', []);

function myAppController($scope) {

    $scope.treeData = [{"name":"Node",
      "folderClass":"fa-folder",
  "nodes":[{
      "name":"Node-1",
      "folderClass":"fa-folder",
      "value" : "Value of Node 1",
       "nodes":[{
           "name":"Node-1-1",

      "folderClass":"fa-folder",
           "nodes":[]
            },{
            "name":"Node-1-2",
      "folderClass":"fa-folder",
            "nodes":[]
            }]
        },{
      "name":"Node-2",
      "folderClass":"fa-folder",
	  "value" : "Value of Node 2",
        "nodes":[{
            "name":"Node-2-1",
      "folderClass":"fa-folder",
            "nodes":[]
            },{
            "name":"Node-2-2",
      "folderClass":"fa-folder",
            "nodes":[]
            }]
        },{
      "name":"Node-3",
      "folderClass":"fa-folder",
	  "value" : "Value of Node 3",
        "nodes":[{
            "name":"Node-3-1",
      "folderClass":"fa-folder",
            "nodes":[{
				"name":"Node-3-1-1",
      "folderClass":"fa-folder",
				"nodes":[]
			},{
				"name":"Node-3-1-2",
      "folderClass":"fa-folder",
				"nodes":[]
			}]
        },{
            "name":"Node-3-2",
      "folderClass":"fa-folder",
            "nodes":[]
            }]
        }]
 },{"name":"Hey Node",
      "folderClass":"fa-folder",
  "nodes":[{
      "name":"Node-1",
      "folderClass":"fa-folder",
      "value" : "Value of Node 1",
       "nodes":[{
           "name":"Node-1-1",
      "folderClass":"fa-folder",
           "nodes":[]
            },{
            "name":"Node-1-2",

      "folderClass":"fa-folder",
            "nodes":[]
            }]
        },{
      "name":"Node-2",
      "folderClass":"fa-folder",
	  "value" : "Value of Node 2",
        "nodes":[{
            "name":"Node-2-1",
      "folderClass":"fa-folder",
            "nodes":[]
            },{
            "name":"Node-2-2",
      "folderClass":"fa-folder",
            "nodes":[]
            }]
        }]
...