Angular PrimeNG TreeTable Column Grouping

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. This article will show us how to use TreeTable Column Grouping in Angular PrimeNG.

Angular PrimeNG TreeTable Column Grouping enables the grouping of table columns in the TreeTable component. Columns can easily be grouped using templating which makes the table More Interactive and user-friendly. Column Grouping can be done using Colspan and Rowspan.

Syntax:

<ng-template pTemplate="header">
    <tr>
      <th colspan="2">Col1</th>
    </tr>

    <tr>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
</ng-template>

Creating Angular application & Module Installation:

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

ng new appname

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

cd appname

Step 3: Install PrimeNG in your given directory.

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

Project Structure: It will look like the following:

Example 1: Below is a simple example that demonstrates the use of the Angular PrimeNG TreeTable Column Grouping.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG TreeTable Column Grouping</h4>

<p-treeTable
    #myTab [columns]="cols"
    [value]="tableData"
>
    <ng-template pTemplate="header">
        <tr>
            <th colspan="2">Information</th>
        </tr>

        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </ng-template>

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

app.component.ts

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

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

    ngOnInit() {
        this.cols = [
            {
                field: 'name',
                header: 'First Name'
            },
            {
                field: 'age',
                header: 'Age'
            },
        ];
        this.tableData = [
            {
                data: {
                    name: 'David',
                    age: '40',
                },
                children: [
                    {
                        data: {
                            name: 'Nathan',
                            age: '16',
                        },
                        children: [
                            {
                                data: {
                                    name: 'Abe',
                                    age: '12',
                                },
                            },
                            {
                                data: {
                                    name: 'Ksi',
                                    age: '12',
                                },
                            },
                        ],
                    },
                    {
                        data: {
                            name: 'Shane',
                            age: '14',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'Warner',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'Max',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'Willy',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'Miley',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'Sam',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    name: 'James',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            name: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            name: 'Charlie',
                            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';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeTableModule,
        ButtonModule,
        InputTextModule,
        HttpClientModule,
        FormsModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [NodeService],
})

export class AppModule { }

Output:

Example 2: Below is another example that demonstrates the use of the Angular PrimeNG Basic Column Grouping.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG TreeTable Column Grouping</h4>

<p-treeTable
    #myTab [columns]="cols"
    [value]="tableData"
>
    <ng-template pTemplate="header">
        <tr>
            <th colspan="3">
                Person Details
            </th>
        </tr>

        <tr>
            <th colspan="2">
                Name
            </th>
            <th rowspan="2">
                Age
            </th>
        </tr>
        <tr>
            <th>
                First Name
            </th>
            <th>
                Last Name
            </th>
        </tr>
    </ng-template>

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

app.component.ts

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

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

    ngOnInit() {
        this.cols = [
            {
                field: 'firstname',
                header: 'First Name'
            },
            {
                field: 'lastname',
                header: 'Last Name'
            },

            {
                field: 'age',
                header: 'Age'
            },
        ];
        this.tableData = [
            {
                data: {
                    firstname: 'David',
                    lastname: 'ace',
                    age: '40',
                },
                children: [
                    {
                        data: {
                            firstname: 'Nathan',
                            lastname: 'ace',
                            age: '16',
                        },
                        children: [
                            {
                                data: {
                                    firstname: 'Abe',
                                    lastname: 'ace',
                                    age: '12',
                                },
                            },
                            {
                                data: {
                                    firstname: 'Ksi',
                                    lastname: 'ace',
                                    age: '12',
                                },
                            },
                        ],
                    },
                    {
                        data: {
                            firstname: 'Shane',
                            lastname: 'ace',
                            age: '14',
                        },
                    },
                ],
            },
            {
                data: {
                    firstname: 'Warner',
                    lastname: 'ace',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            lastname: 'ace',
                            firstname: 'Michelle',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            firstname: 'Charlie',
                            lastname: 'ace',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    firstname: 'Max',
                    lastname: 'ace',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            firstname: 'Michelle',
                            lastname: 'ace',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            firstname: 'Charlie',
                            lastname: 'ace',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    firstname: 'Willy',
                    lastname: 'ace',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            firstname: 'Michelle',
                            lastname: 'ace',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            firstname: 'Charlie',
                            lastname: 'ace',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    firstname: 'Miley',
                    lastname: 'ace',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            firstname: 'Michelle',
                            lastname: 'ace',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            firstname: 'Charlie',
                            lastname: 'ace',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    firstname: 'Sam',
                    lastname: 'ace',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            firstname: 'Michelle',
                            lastname: 'ace',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            firstname: 'Charlie',
                            lastname: 'ace',
                            age: '24',
                        },
                    },
                ],
            },
            {
                data: {
                    firstname: 'James',
                    lastname: 'ace',
                    age: '55',
                },
                children: [
                    {
                        data: {
                            firstname: 'Michelle',
                            lastname: 'ace',
                            age: '20',
                        },
                    },
                    {
                        data: {
                            lastname: 'ace',
                            firstname: 'Charlie',
                            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';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeTableModule,
        ButtonModule,
        InputTextModule,
        HttpClientModule,
        FormsModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [NodeService],
})

export class AppModule { }

Output:

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