Expandable recursive tree table with AngularJS and Bootstrap

Below is the code for AngularJs directive which will render a table structure containing tree in its first column and data in further columns. By clicking on tree node one can expand/collapse subsequent rows. Please take a look at sample data provided to understand the data model used in this directive.

angularTreeTable.directive.js

'use strict';(function () {    let app = angular.module('TestApp');    app.directive('angularTreeTable', function () {        return {            restrict: 'EA',            transclude: true,            scope: {tableData: '=', tableConfig: '='},            bindToController: true,            templateUrl: 'angularTreeTable.directive.html',            controller: function ($scope, StatusMessage, $sce) {                let ctrl = this;            },            controllerAs: "ctrl"        };    });})();

 

angularTreeTable.directive.html

<div class="treeTable">    <table class="table-nested table table-bordered">        <thead>        <tr>            <th ng-repeat="(thKey, thVal) in ctrl.tableConfig.colInfo"                ng-class="{'cell-members': thKey!=0}"> {{thVal.heading}} </th>        </tr>        </thead>        <tbody ng-class="{opened: item.opened}" ng-include="'table_tree.html'"               ng-repeat="item in ctrl.tableData"></tbody>    </table>    <script id="table_tree.html" type="text/ng-template">        <tr ng-class="{'parent-node': item.childrens, 'leaf-node': !item.childrens}"            ng-init="parentScope = $parent.$parent; initCheckbox(item, parentScope.item)">            <td ng-class="{'cell-name':tdKey === 0, 'cell-members': tdKey !== 0}"                ng-repeat="(tdKey, tdVal) in ctrl.tableConfig.colInfo"                ng-click="tdKey === 0 && (item.opened = !item.opened)">                <div ng-if="tdKey === 0" class="indent" style="padding-left: {{15*level}}px;"></div>                <div ng-if="tdVal.showIcon" ng-bind-html="ctrl.getIconDomByType(item[tdVal.iconDataKey])"                     style="display: inline"></div>                {{item[tdVal.dataKey]}}            </td>        </tr>        <tr class="children" ng-if="item.childrens && item.childrens.length > 0">            <td colspan="{{ctrl.tableConfig.colSpan}}" style="padding: 0px !important;">                <table class="table">                    <tbody ng-class="{opened: item.opened}" ng-include="'table_tree.html'" ng-init="level = level + 1"                           ng-repeat="item in item.childrens"></tbody>                </table>            </td>        </tr> </script></div>

 

styles.scss

.treeTable {  table {    margin-bottom: 0px !important;  }  .table-nested {    border: 1px solid #ddd;    text-align: left;    th, td {      + th, + td {        padding-left: 5px;      }    }    td {      border-top: 1px solid #ddd;      border-left: 1px solid #ddd;      &[colspan] {        border: none;      }    }    .cell-input {      width: 20px;      border-right: 1px solid #ddd;    }    .cell-members {      width: 150px;    }    .indent {      display: inline-block;    }    .parent-node {      > .cell-name {        cursor: pointer;        word-break: break-all;        > .indent {          margin-right: 5px;          &:before {            content: "\e080";            font-family: 'Glyphicons Halflings';            display: inline-block;            -moz-transition: -moz-transform 0.3s;            -o-transition: -o-transform 0.3s;            -webkit-transition: -webkit-transform 0.3s;            transition: transform 0.3s;          }        }      }    }    .children {      display: none    }    .opened {      > tr > .cell-name > .indent:before {        -moz-transform: rotate(90deg);        -ms-transform: rotate(90deg);        -webkit-transform: rotate(90deg);        transform: rotate(90deg);      }      > .children {        display: table-row      }    }  }}

 

Sample Data and how to use

/* colInfo should contain configuration data for columns you want to display this includes heading for that column and dataKey for that column. colSpan is the field for adjusting table UI structure. It should be adjusted according to number of columns you want to display */ tableConfig = {    colInfo: [{heading: "Column1", dataKey: "name"}, {        heading: "Column2",        dataKey: "empId"    }, {heading: "Column3", dataKey: "empName"} {heading: "Column4", dataKey: "addr"}], colSpan: 4} /* This is the actual data we want to display in table. */tableData = [{    name: "IT Department"    childrens: [{        name: "Employee Data",        childrens: [{empId: "001", empName: "Sameer", addr: "Pune"}, {            empId: "002",            empName: "Adolph",            addr: "Mumbai"        }, {empId: "003", empName: "Imran", addr: "Delhi"}, {empId: "004", empName: "Aatharv", addr: "Nagpur"}]    }]}] /* How to use directive */ <angular-tree-table table-data="tableData" table-config="tableConfig"></angular-tree-table>

 

Keywords:
HTML, table, tree, template, ng-repeate, recursive template, exapand, collapse
AngularJS Expandable recursive tree table
Nested/Tree View using HTML table in AngularJs
Tree level table rows using AngularJs
Angularjs : – tree – table combination.
Best options for an AngularJS Tree Grid