Angular Tree Table Using PrimeNG

Angular demand is growing day by day and the demand of UI components and third party libraries are increasing rapidly. So one of the advance UI components that mostly we use in our project is Tree Table. So we know that we can create a basic table with pagination using Angular Material or Angular Bootstrap (ngx-bootstrap), but for Tree Table we need to use some specific Angular UI library which supports tree table structure and some of the UI Library which supports tree tables are like Prime NG, Nebular, AG-Grid etc. So in this tutorial we will explain that how to use PrimeNG and create Angular Tree table.

Install Angular and PrimeNG

npm i -g @angular/cli
ng new DemoProject --routing
npm install primeng --save
npm install primeicons --save
npm install @angular/cdk --save

In here first we install the angular cli and created a DemoProject with root routing and also install required dependency for primeng Angular library. Now lets create primeNG tree table. So create a Module name tree-table.

Create Tree Table Module and Component with Lazy Loading Routing

ng generate module tree-table --route tree-table --module app.module

So we have created a component Tree Table and now we will integrate primeng tree table in this component.

Import TreeTable Module in angular.module.ts File

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {TreeTableModule} from 'primeng/treetable';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
TreeTableModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Next we we will create a response.json file in assets/resource directory where we will store the sample JSOn structure of tree table and it is given below.

response.json Sample Response For Tree Table

{
"data":
[
{
"data":{
"name":"Documents",
"size":"75kb",
"type":"Folder"
},
"children":[
{
"data":{
"name":"Work",
"size":"55kb",
"type":"Folder"
},
"children":[
{
"data":{
"name":"Expenses.doc",
"size":"30kb",
"type":"Document"
}
},
{
"data":{
"name":"Resume.doc",
"size":"25kb",
"type":"Resume"
}
}
]
},
{
"data":{
"name":"Home",
"size":"20kb",
"type":"Folder"
},
"children":[
{
"data":{
"name":"Invoices",
"size":"20kb",
"type":"Text"
}
}
]
}
]
},
{
"data":{
"name":"Pictures",
"size":"150kb",
"type":"Folder"
},
"children":[
{
"data":{
"name":"barcelona.jpg",
"size":"90kb",
"type":"Picture"
}
},
{
"data":{
"name":"primeui.png",
"size":"30kb",
"type":"Picture"
}
},
{
"data":{
"name":"optimus.jpg",
"size":"30kb",
"type":"Picture"
}
}
]
}
]
}

Now lets create a NodeService where we will do the response.json api call and the code is given below. We need to import the TreeNode to define the type of the tree structure data and model structure look like this.

TreeNode Model Structure:

export interface TreeNode {
data?: any;
children?: TreeNode[];
leaf?: boolean;
expanded?: boolean;
}

Create Node Service:

import {TreeNode} from 'primeng/api'; //Required 
@Injectable()
export class NodeService {
constructor(private http: Http) {}
getFilesystem() {
return this.http.get('showcase/resources/data/filesystem.json')
.toPromise()
.then(res => <TreeNode[]> res.json().data);
}
}

After creating this service now we will create Table columns which will be dynamic and fetch the response.json data from the response.json and implement the tree table.

Tree Table Component

export class TreeTable implements OnInit {
files: TreeNode[];
cols: any[];
constructor(private nodeService: NodeService) { }
ngOnInit() {
this.nodeService.getFilesystem().then(files => this.files = files);
this.cols = [
{ field: 'name', header: 'Name' },
{ field: 'size', header: 'Size' },
{ field: 'type', header: 'Type' }
];
}
}

Now we can see that we have got the data in files variable and we can use the variable in component html to render the Tree Table. In here we have converted the api call to Promise call just for make it simple but if you are using any stream data like if you are getting some realtime data for example from Firebase or Cloud Fires Store database or from any other source then please use observable instead of promise. So now our data is created and let's write the tree table structure in the component HTML.

Tree Table Component HTML

<p-treeTable [value]="files">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of cols">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowNode let-rowData="rowData">
<tr>
<td *ngFor="let col of cols; let i = index">
<p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-treeTable>

In the above HTML code you can see that we have created PrimeNG tree table structure, we have passed our main data which stores in files variable in the value attribute by doing property binding with p-treeTable component and also we have implemented the dynamic column based on the cols json.

Conclusion

So now in this way we can create a basic tree structure with dynamic column but if you want to do create some advance features or custom template then checkout out the documentation from primeNG they provide very robust options to customize the tree table.