Angular PrimeNG Table Column Grouping

Angular PrimeNG is a UI toolkit to make web applications with Angular. It costing of hundreds of pre-built component that makes it easy for developers to create a beautiful and responsive web solution in less time. In this article, we will see Angular PrimeNG Table Column Grouping.

A Table Component is used to show some data in tabular form. The columns of the table can be grouped by using the rowspan and the colspan CSS properties for the <td> elements in the template.

Syntax:

<p-table [value]="..." responsiveLayout="scroll">
    <ng-template pTemplate="header">
        <tr>
            <th rowspan="2">Company</th>
            <th colspan="2">Sales</th>
        </tr>
        <tr>
            <th>This Year</th>
            <th>Last Year</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-company>
        <tr>
            <td>{{company.name}}</td>
            <td>{{company.thisYearSales}}</td>
            <td>{{company.lastYearSales}}</td>
        </tr>
    </ng-template>
</p-table>

Creating Angular application and Installing the Modules:

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

ng new myapp

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

cd myapp

Step 3: Install PrimeNG in your given directory.

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

Project Structure: After completing the above steps the project structure will look like the following.

Project Structure

Example 1: This example shows the use of the rowspan and colspan properties to group the sales column of the table.

app.component.html

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table Column Grouping</h4>

    <p-table [value]="companyProfiles"
        responsiveLayout="scroll">
        <ng-template pTemplate="header">
            <tr>
                <th rowspan="2">Company</th>
                <th colspan="2">Sales</th>
            </tr>
            <tr>
                <th>This Year</th>
                <th>Last Year</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body"
            let-company
            let-rowData
            let-x="rowIndex">
            <tr>
                <td>{{company.name}}</td>
                <td>{{company.thisYearSales}}</td>
                <td>{{company.lastYearSales}}</td>
            </tr>
        </ng-template>
        <ng-template pTemplate="footer">
            <tr>
                <td colspan="3">
                    This is just demo data for example
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

app.component.ts

import { Component } from '@angular/core';

interface CompanyProfile {
    name: String;
    thisYearSales: String;
    lastYearSales: String;
    thisYearGrowth: String;
    lastYearGrowth: String;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    companyProfiles: CompanyProfile[] = [];

    ngOnInit() {
        this.companyProfiles = [
            {
                name: "Apple",
                thisYearSales: "$ 2,000,000,000",
                lastYearSales: "$ 1,700,000,000",
                thisYearGrowth: "21%",
                lastYearGrowth: "15%",
            },
            {
                name: "Google",
                thisYearSales: "$ 1,800,000,000",
                lastYearSales: "$ 1,500,000,000",
                thisYearGrowth: "15%",
                lastYearGrowth: "13%",
            },
            {
                name: "Meta",
                thisYearSales: "$ 1,100,000,000",
                lastYearSales: "$ 1,200,000,000",
                thisYearGrowth: "11%",
                lastYearGrowth: "12%",
            },
            {
                name: "Tesla",
                thisYearSales: "$ 1,300,000,000",
                lastYearSales: "$ 900,000,000",
                thisYearGrowth: "23%",
                lastYearGrowth: "16%",
            },
            {
                name: "Twitter",
                thisYearSales: "$ 1,200,000,000",
                lastYearSales: "$ 1,200,000,000",
                thisYearGrowth: "19%",
                lastYearGrowth: "18%",
            }
        ];
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

Example 2: Here is one more example to understand the use of the rowspan and colspan properties.

app.component.html

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table Column Grouping</h4>

    <p-table [value]="companyProfiles"
        responsiveLayout="scroll">
        <ng-template pTemplate="header">
            <tr>
                <th rowspan="3">Company</th>
                <th>Data</th>
            </tr>
            <tr>
                <th colspan="2">Sales</th>
                <th colspan="2">Growth</th>
            </tr>
            <tr>
                <th>This Year</th>
                <th>Last Year</th>

                <th>This Year</th>
                <th>Last Year</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body"
            let-company
            let-rowData
            let-x="rowIndex">
            <tr>
                <td>{{company.name}}</td>
                <td>{{company.thisYearSales}}</td>
                <td>{{company.lastYearSales}}</td>
                <td>{{company.thisYearGrowth}}</td>
                <td>{{company.lastYearGrowth}}</td>
            </tr>
        </ng-template>
        <ng-template pTemplate="footer">
            <tr>
                <td colspan="3">
                    This is just demo data for example
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

app.component.ts

import { Component } from '@angular/core';

interface CompanyProfile {
    name: String;
    thisYearSales: String;
    lastYearSales: String;
    thisYearGrowth: String;
    lastYearGrowth: String;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    companyProfiles: CompanyProfile[] = [];

    ngOnInit() {
        this.companyProfiles = [
            {
                name: "Apple",
                thisYearSales: "$ 2,000,000,000",
                lastYearSales: "$ 1,700,000,000",
                thisYearGrowth: "21%",
                lastYearGrowth: "15%",
            },
            {
                name: "Google",
                thisYearSales: "$ 1,800,000,000",
                lastYearSales: "$ 1,500,000,000",
                thisYearGrowth: "15%",
                lastYearGrowth: "13%",
            },
            {
                name: "Meta",
                thisYearSales: "$ 1,100,000,000",
                lastYearSales: "$ 1,200,000,000",
                thisYearGrowth: "11%",
                lastYearGrowth: "12%",
            },
            {
                name: "Tesla",
                thisYearSales: "$ 1,300,000,000",
                lastYearSales: "$ 900,000,000",
                thisYearGrowth: "23%",
                lastYearGrowth: "16%",
            },
            {
                name: "Twitter",
                thisYearSales: "$ 1,200,000,000",
                lastYearSales: "$ 1,200,000,000",
                thisYearGrowth: "19%",
                lastYearGrowth: "18%",
            }
        ];
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

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