JAVASCRIPT

How to create a table with indents from nested JSON in angularjs

angular.module('app').controller('RootCtrl', ['$scope', function($scope) {
    // assigning the data to $scope to make it available in the view
    $scope.tableData = {Example Data from top};
}]);

//Your tree component could be something on this lines:

angular.module('app').component('treeComponent', {
    controller: 'TreeCtrl',
    bindings: {
        tree: '<',
    },
    templateUrl: 'tree-view.html'
});

//your root template should load the first instance of the component:

<div>
   <tree-component tree="tableData"></tree-component>
</div>

//then the component template should take care of the the recursion when required; tree-view.html:

<table class="record-table">
    <thead>
        <tr>
           <th>
              <strong>{{ $ctrl.tableData.name }}</strong>
           </th> 
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="node in $ctrl.tableData.children">
            <td>{{node.name}}</td>
            <td ng-if="node.children.length > 0">
               <tree-component tree="node.children"></tree-component>
            </td>
        </tr>
    </tbody>
</table>

//creating indentation then becomes easy using basic css:

.record-table .record-table {
   padding-left: 20px
}