Angular PrimeNG TreeTable Templates

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more.

In this article, we are going to learn Angular PrimeNG TreeTable Templates. TreeTable is used to display hierarchical data in tabular format. The Templates add a great level of customization to the TreeTable and we have total control over the content and display of the TreeTable. We can control pagination, sorting, etc.

Angular PrimeNG TreeTable Templates:

• caption: It is the caption content of the TreeTable.
• header(Columns): It is the content of the thead element.
• body(node, rowData, Columns): It is the content of the tbody element.
• footer(Columns):  It is the content of the tfooter element.
• summary: It is the summary section displayed below the table.
• colgroup(Columns): It is the ColGroup element of the table to customize columns.
• frozenheader(Columns): It is the content of the thead element in the frozen side.
• frozenbody(node, rowData, Columns): It is the content of the tbody element on the frozen side.
• frozenfooter(Columns):  It is the content of the tfooter element on the frozen side.
• frozencolgroup(Columns): It is the ColGroup element of the table to customize columns on the frozen side.
• emptymessage(Columns, frozen): It is the content to display when there is no value to display.
• paginatorleft(state): It is the content to display when there is no value to display.
• paginatorright(state): It is the content to display when there is no value to display.

Syntax: 

<p-treeTable [columns]="cols" [value]="data">
      <ng-template pTemplate="template_name">
        // Set the template accordingly
      </ng-template>
</p-treeTable>

Creating Angular application & Module Installation:

Step 1: Create an Angular application using the following command.

ng new geeks_angular

Step 2: After creating your project folder i.e. geeks_angular, move to it using the following command.

cd geeks_angular

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: The project structure will look like the following:

Project Structure

Example 1: In the following example, we have TreeTable using the head, body, content TreeTable templates.

app.component.html

<h1 style="color: green; text-align:center;">
    GeeksforGeeks
</h1>

<h3>Angular PrimeNG TreeTable Templates</h3>

<p-treeTable [columns]="cols"
    [value]="tableData">
    <ng-template pTemplate="header">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body"
        let-rowNode let-rowData="rowData"
        let-columns="columns">
        <tr>
            <td>
                <p-treeTableToggler
                    [rowNode]="rowNode">
                </p-treeTableToggler>
                {{ rowData.name }}
            </td>
            <td>{{ rowData.age }}</td>
            <td>{{ rowData.type }}</td>
        </tr>
    </ng-template>
</p-treeTable>

app.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { NodeService } from './nodeservice';
import { TreeNode } from 'primeng/api';
import { TreeTable } from 'primeng/treetable';
import { MessageService } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {
    tableData: TreeNode[];
    cols: any[];

    constructor(private messageService: MessageService) { }

    ngOnInit() {
        this.cols = [
            { field: 'name', header: 'First Name' },
            { field: 'age', header: 'Age' },
        ];
        this.tableData = [
            {
                data: {
                    name: 'A',
                    age: '40',
                },
                children: [
                    {
                        data: {
                            name: 'B',
                            age: '16',
                        },
                    },
                    {
                        data: {
                            name: 'C',
                            age: '14',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'D',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'E',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'F',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'G',
                    age: '32',
                },
                children: [
                    {
                        data: {
                            name: 'H',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'I',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'J',
                    age: '64',
                },
                children: [
                    {
                        data: {
                            name: 'K',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'L',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'M',
                    age: '12',
                },
                children: [
                    {
                        data: {
                            name: 'N',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'O',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'P',
                    age: '34',
                },
                children: [
                    {
                        data: {
                            name: 'Q',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'R',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'S',
                    age: '43',
                },
                children: [
                    {
                        data: {
                            name: 'T',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'U',
                            age: '24',
                        },
                    },
                ],
            },
        ];
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NodeService } from './nodeservice';
import { TreeTableModule } from 'primeng/treetable';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeTableModule,
        ButtonModule,
        InputTextModule,
        HttpClientModule,
        FormsModule,
        ToastModule,
        RippleModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [NodeService],
})
export class AppModule { }

Output:

Example 2: In the following example, we didn’t provide any data and used an emptymessage template, hence the message is displayed.

app.component.html

<h1 style="color: green; text-align:center;">
    GeeksforGeeks
</h1>

<h3>Angular PrimeNG TreeTable Templates</h3>

<p-treeTable [columns]="cols" [value]="no_data">
    <ng-template pTemplate="header">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="emptymessage">
        <h3>The Table has no content</h3>
    </ng-template>

    <ng-template pTemplate="body"
        let-rowNode let-rowData="rowData"
        let-columns="columns">
        <tr>
            <td>
                <p-treeTableToggler
                    [rowNode]="rowNode">
                </p-treeTableToggler>
                {{ rowData.name }}
            </td>
            <td>{{ rowData.age }}</td>
            <td>{{ rowData.type }}</td>
        </tr>
    </ng-template>
</p-treeTable>

app.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { NodeService } from './nodeservice';
import { TreeNode } from 'primeng/api';
import { TreeTable } from 'primeng/treetable';
import { MessageService } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {
    tableData: TreeNode[];
    cols: any[];

    constructor(private messageService: MessageService) { }

    ngOnInit() {
        this.cols = [
            { field: 'name', header: 'First Name' },
            { field: 'age', header: 'Age' },
        ];
        this.tableData = [
            {
                data: {
                    name: 'A',
                    age: '40',
                },
                children: [
                    {
                        data: {
                            name: 'B',
                            age: '16',
                        },
                    },
                    {
                        data: {
                            name: 'C',
                            age: '14',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'D',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'E',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'F',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'G',
                    age: '32',
                },
                children: [
                    {
                        data: {
                            name: 'H',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'I',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'J',
                    age: '64',
                },
                children: [
                    {
                        data: {
                            name: 'K',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'L',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'M',
                    age: '12',
                },
                children: [
                    {
                        data: {
                            name: 'N',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'O',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'P',
                    age: '34',
                },
                children: [
                    {
                        data: {
                            name: 'Q',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'R',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'S',
                    age: '43',
                },
                children: [
                    {
                        data: {
                            name: 'T',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'U',
                            age: '24',
                        },
                    },
                ],
            },
        ];
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NodeService } from './nodeservice';
import { TreeTableModule } from 'primeng/treetable';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeTableModule,
        ButtonModule,
        InputTextModule,
        HttpClientModule,
        FormsModule,
        ToastModule,
        RippleModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [NodeService],
})
export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/treetable