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.
Join the DZone community and get the full member experience.
Join For FreeAn 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
xxxxxxxxxx
tableData: TreeTableData = null; //Table Data Holder
tableConfig = new TreeTableDataConfig(); //Table Configuration
tableHeaders: TreeTableHeaderObject[] = []; //Table Headers and Property Binding
Declare the below methods to populate dummy data into the table
populateDummyData() {
const data = [];
for (let i = 0; i < 120; i++) {
const row = new TreeTableRow(i + '', { sno: i+1, name: 'John '+(i+1), age: i+1. address: {dno: '1-23'}}, false, null);
data.push(row);
}
this.tableData = new TreeTableData(this.tableConfig);
this.populateHeaders();
this.tableData.data = data;
}
populateHeaders() {
this.tableHeaders.splice(0, this.tableHeaders.length);
this.tableHeaders.push(new TreeTableHeaderObject('Sno', 'sno', null, true));
this.tableHeaders.push(new TreeTableHeaderObject('Name', 'name', null, true));
this.tableHeaders.push(new TreeTableHeaderObject('Age', 'age', null, true));
this.tableHeaders.push(new TreeTableHeaderObject('User Details', '=CONCAT(Name: |||name|||<br/>|||Age: |||age)', null, true));
this.tableHeaders.push(new TreeTableHeaderObject('D.no', 'address.dno', null, true));
this.tableData.headers = this.tableHeaders;
}
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:
Expandable Table View
To configure the row as an expandable, we need to configure the table as below
xxxxxxxxxx
tableConfig = {
showExpandArrows: true, // Showing Arrows each possible row
showExpandAllArrows: true // Expand all button
};
Update the populateDummyData method as below to add Children to row
xxxxxxxxxx
populateDummyData() {
const data = [];
for (let i = 0; i < 120; i++) {
const row = new TreeTableRow(i + '', { sno: i+1, name: 'John '+(i+1), age: i+1}, false, null);
if (i % 10 !== 0) {
row.expandable = true;
const subTableData = new TreeTableData(this.tableConfig); //We can add new config object if required
const subData = [];
for (let j = 0; j < (10 - i % 10); j++) {
const subRow = new TreeTableRow(j + '', { sno: j + 1, name: 'Paul ' + (j + 1), age: j + 1}, false, null);
subData.push(subRow);
}
subTableData.headers = this.tableHeaders; //Using the same headers as parent table, we can use separate if required
subTableData.data = subData;
row.children = subTableData;
}
data.push(row);
}
this.tableData = new TreeTableData(this.tableConfig);
this.populateHeaders();
this.tableData.data = data;
}
Column Visibility Options
xxxxxxxxxx
columnVisibility: true, // To show columns visibility options on table
columnVisibilityDropDown: true // To show columns visibility options on table as a popover
Other Configuration Options
There are so many options, most of them are self-explanatory
xxxxxxxxxx
tableConfig = {
context: null, // Context for click actions
extraInfos: [], // Show data above the table
showTableHeaders: true, // To show/ hide headers
columnVisibility: false, // To show columns visibility options on table
columnVisibilityDropDown: false, // To show columns visibility options on table as popover
visibleColumnFiltersVisibility: false,
visibleColumnFilters: {},
showExpandArrows: false,
fullClassName: 'stacktable table-bordered large-only table table-sm',
sortAscClassName: 'col-sort col-sort-asc',
sortDescClassName: 'col-sort col-sort-desc',
sortNothingClassName: 'col-sort col-sort-nothing',
customClassName: null,
showExpandAllArrows: false,
showExpandAllEmptyChildren: false,
sortedColumn: {},
showPageLengthDropdown: true,
pageSizes: [10, 25, 50, 100],
level: 0,
columnFilters: {},
rowClickablesContext: null,
rowClickables: {},
commonSearch: true,
excelExportButton: false,
excelExportFileName: 'ExportFile',
excelExportButtonText: 'Excel Export',
excelExportAllChildren: true,
excelExportOnlyExpanded: false,
events: {
shouldRowExpand: null,
rowExpanded: null,
shouldRowCollapse: null,
rowCollapsed: null
}
}
Demo AngularTreeTable Sample
https://anjnkmr.github.io/angular-tree-tableCode:
https://github.com/anjnkmr/angular-tree-tableMedium Link:
https://medium.com/@anjnkmr/angular-tree-table-bb9312c9720Published at DZone with permission of Anjan Kumar. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments