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

 

angularTreeTable.directive.html

 

styles.scss

 

Sample Data and how to use

 

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

Leave a comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: