{{announcement.body}}
{{announcement.title}}

Angular Tree Table

DZone 's Guide to

Angular Tree Table

An angular plugin that will help you to display the hierarchical table data in a expand/collapsible manner with a lot of other options.

· Open Source Zone ·
Free Resource

An angular plugin that will help you to display the hierarchical table data in a expand/ collapsible manner with a lot of other options

Prerequisites

npm i jquery - Dependency for Bootstrap

npm i popper.js -To show the Column Visibility popover

npm i bootstrap - To show the Column Visibility popover and design

npm i file-saver -To store the API exported or generated file

npm i xlsx -To generate Excel while not using server-side processing

npm i moment -To sort date columns while not using server-side processing

Installation

npm i jquery popper.js bootstrap file-saver xlsx moment angular-tree-table --save

Updating angular.json

Adding jQuery, Popper JS, Bootstrap CSS, and JS -
Add the following lines in scripts array under build section

"node_modules/jquery/dist/jquery.min.js", 
"node_modules/popper.js/dist/umd/popper.min.js", 
"node_modules/bootstrap/dist/js/bootstrap.min.js" 

Add the following lines in styles array under build section

node_modules/bootstrap/dist/css/bootstrap.min.css

Integrating into Angular Application

import AngularTreeTableModule in app.module.ts.

Configuration in Component

Declare the below variables for table initialization

Java
 




xxxxxxxxxx
1


 
1
tableData: TreeTableData = null; //Table Data Holder 
2
tableConfig = new TreeTableDataConfig(); //Table Configuration 
3
tableHeaders: TreeTableHeaderObject[] = []; //Table Headers and Property Binding 


Declare the below methods to populate dummy data into the table

Java
 




x
19


 
1
populateDummyData() {
2
    const data = [];
3
    for (let i = 0; i < 120; i++) {
4
      const row = new TreeTableRow(i + '', { sno: i+1, name: 'John '+(i+1), age: i+1. address: {dno: '1-23'}}, false, null);
5
      data.push(row);
6
    }
7
    this.tableData = new TreeTableData(this.tableConfig);
8
    this.populateHeaders();
9
    this.tableData.data = data;
10
  }
11
  populateHeaders() {
12
    this.tableHeaders.splice(0, this.tableHeaders.length);
13
    this.tableHeaders.push(new TreeTableHeaderObject('Sno', 'sno', null, true));
14
    this.tableHeaders.push(new TreeTableHeaderObject('Name', 'name', null, true));
15
    this.tableHeaders.push(new TreeTableHeaderObject('Age', 'age', null, true));
16
    this.tableHeaders.push(new TreeTableHeaderObject('User Details', '=CONCAT(Name: |||name|||<br/>|||Age: |||age)', null, true));
17
    this.tableHeaders.push(new TreeTableHeaderObject('D.no', 'address.dno', null, true));
18
    this.tableData.headers = this.tableHeaders;
19
  }


Adding View Element in Component View

Add the below tag in Component HTML View

With this, you will get the view of basic Table with given data:

Basic Tree Table Screenshot

Expandable Table View

To configure the row as an expandable, we need to configure the table as below

Java
 




xxxxxxxxxx
1


 
1
tableConfig = {
2
 showExpandArrows: true, // Showing Arrows each possible row
3
 showExpandAllArrows: true // Expand all button 
4
}; 


Update the populateDummyData method as below to add Children to row

Java
 




xxxxxxxxxx
1
22


 
1
populateDummyData() {
2
    const data = [];
3
    for (let i = 0; i < 120; i++) {
4
      const row = new TreeTableRow(i + '', { sno: i+1, name: 'John '+(i+1), age: i+1}, false, null);
5
      if (i % 10 !== 0) {
6
        row.expandable = true;
7
        const subTableData = new TreeTableData(this.tableConfig); //We can add new config object if required
8
        const subData = [];
9
        for (let j = 0; j < (10 - i % 10); j++) {
10
          const subRow = new TreeTableRow(j + '', { sno: j + 1, name: 'Paul ' + (j + 1), age: j + 1}, false, null);
11
          subData.push(subRow);
12
        }
13
        subTableData.headers = this.tableHeaders; //Using the same headers as parent table, we can use separate if required
14
        subTableData.data = subData;
15
        row.children = subTableData;
16
      }
17
      data.push(row);
18
    }
19
    this.tableData = new TreeTableData(this.tableConfig);
20
    this.populateHeaders();
21
    this.tableData.data = data;
22
  }


Expandable Table Screenshot

Column Visibility Options

Java
 




xxxxxxxxxx
1


 
1
columnVisibility: true, // To show columns visibility options on table 
2
columnVisibilityDropDown: true // To show columns visibility options on table as a popover


Column Visibility Options Demo - Popover and Buttons

Other Configuration Options

There are so many options, most of them are self-explanatory

Java
 




xxxxxxxxxx
1
36


 
1
tableConfig = {
2
      context: null, // Context for click actions
3
      extraInfos: [], // Show data above the table
4
      showTableHeaders: true, // To show/ hide headers
5
      columnVisibility: false, // To show columns visibility options on table
6
      columnVisibilityDropDown: false, // To show columns visibility options on table as popover
7
      visibleColumnFiltersVisibility: false,
8
      visibleColumnFilters: {},
9
      showExpandArrows: false,
10
      fullClassName: 'stacktable table-bordered large-only table table-sm',
11
      sortAscClassName: 'col-sort col-sort-asc',
12
      sortDescClassName: 'col-sort col-sort-desc',
13
      sortNothingClassName: 'col-sort col-sort-nothing',
14
      customClassName: null,
15
      showExpandAllArrows: false,
16
      showExpandAllEmptyChildren: false,
17
      sortedColumn: {},
18
      showPageLengthDropdown: true,
19
      pageSizes: [10, 25, 50, 100],
20
      level: 0,
21
      columnFilters: {},
22
      rowClickablesContext: null,
23
      rowClickables: {},
24
      commonSearch: true,
25
      excelExportButton: false,
26
      excelExportFileName: 'ExportFile',
27
      excelExportButtonText: 'Excel Export',
28
      excelExportAllChildren: true,
29
      excelExportOnlyExpanded: false,
30
      events: {
31
          shouldRowExpand: null,
32
          rowExpanded: null,
33
          shouldRowCollapse: null,
34
          rowCollapsed: null
35
      }
36
  }


Demo AngularTreeTable Sample

https://anjnkmr.github.io/angular-tree-table

Code:

https://github.com/anjnkmr/angular-tree-table

Medium Link:

https://medium.com/@anjnkmr/angular-tree-table-bb9312c9720
Topics:
angular, coding, community, development, engineering, html, inclusive, javascript, opensource, software

Published at DZone with permission of Anjan Kumar . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}