Open In App

Angular PrimeNG Table Row Group

Last Updated : 26 Sep, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

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 Row Group.

A Table Component is used to show some data in tabular form. The rows of a table can be grouped together using three methods: using subheader mode, using expandable rows, and using rowspan property. In this article, we will see all three methods one by one.

Syntax:

<p-table 
    [value]="companyProfiles" 
    rowGroupMode="subheader || rowspan" 
    groupRowsBy="sector" 
    [scrollable]="true" 
    scrollHeight="350px">
    
    <ng-template pTemplate="header">
        <tr>
            <th style="min-width:200px">
                Company</th>
            <th style="min-width:200px">
                This Year Sales</th>
            ...
        </tr>
    </ng-template>
    <ng-template pTemplate="groupheader" let-company>
        <tr pRowGroupHeader>
            <td colspan="3">
                <span class="font-bold">
                    {{company.sector}}</span>
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-company>
        <tr>
            <td style="min-width:200px">
                {{company.name}}</td>
            <td style="min-width:200px">
                {{company.thisYearSales}}</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: In this example, we used the subheader mode to group rows in the table.

app.component.html 
<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table Row Group</h4>

    <p-table
        [value]="companyProfiles" 
        rowGroupMode="subheader" 
        groupRowsBy="sector" 
        [scrollable]="true" 
        scrollHeight="350px">
        <ng-template pTemplate="header">
            <tr>
                <th style="min-width:200px">
                      Company</th>
                <th style="min-width:200px">
                      This Year Sales</th>
                <th style="min-width:200px">
                      Last Year Sales</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="groupheader" let-company>
            <tr pRowGroupHeader>
                <td colspan="3">
                    <span class="font-bold">
                          {{company.sector}}</span>
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" 
            let-company>
            <tr>
                <td style="min-width:200px">
                    {{company.name}}
                </td>
                <td style="min-width:200px">
                    {{company.thisYearSales}}
                </td>
                <td style="min-width:200px">
                    {{company.lastYearSales}}
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>
app.component.ts 
import { Component } from '@angular/core';

interface CompanyProfile {
    name: String;
    sector: 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",
                sector: "Technology",
                thisYearSales: "$ 2,000,000,000",
                lastYearSales: "$ 1,700,000,000",
                thisYearGrowth: "21%",
                lastYearGrowth: "15%",
            },
            {
                name: "Mac Donalds",
                sector: "Food",
                thisYearSales: "$ 1,100,000,000",
                lastYearSales: "$ 800,000,000",
                thisYearGrowth: "18%",
                lastYearGrowth: "15%",
            },
            {
                name: "Google",
                sector: "Technology",
                thisYearSales: "$ 1,800,000,000",
                lastYearSales: "$ 1,500,000,000",
                thisYearGrowth: "15%",
                lastYearGrowth: "13%",
            },
            {
                name: "Domino's",
                sector: "Food",
                thisYearSales: "$ 1,000,000,000",
                lastYearSales: "$ 800,000,000",
                thisYearGrowth: "13%",
                lastYearGrowth: "14%",
            },
            {
                name: "Meta",
                sector: "Technology",
                thisYearSales: "$ 1,100,000,000",
                lastYearSales: "$ 1,200,000,000",
                thisYearGrowth: "11%",
                lastYearGrowth: "12%",
            },
            {
                name: "Snapchat",
                sector: "Technology",
                thisYearSales: "$ 1,500,000,000",
                lastYearSales: "$ 1,200,000,000",
                thisYearGrowth: "16%",
                lastYearGrowth: "14%",
            },
            {
                name: "Tesla",
                sector: "AutoMobile",
                thisYearSales: "$ 1,300,000,000",
                lastYearSales: "$ 900,000,000",
                thisYearGrowth: "23%",
                lastYearGrowth: "16%",
            },
            {
                name: "Ford",
                sector: "AutoMobile",
                thisYearSales: "$ 700,000,000",
                lastYearSales: "$ 750,000,000",
                thisYearGrowth: "14%",
                lastYearGrowth: "15%",
            },
            {
                name: "Twitter",
                sector: "Technology",
                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: This example illustrates how to group rows of a table together using the expandable rows.

app.component.html 
<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table Row Group</h4>

    <p-table
        [value]="companyProfiles" 
        rowGroupMode="subheader" 
        groupRowsBy="sector" 
        dataKey="sector">
        <ng-template pTemplate="header">
            <tr>
                <th style="min-width:200px">
                    Company
                </th>
                <th style="min-width:200px">
                    This Year Sales
                </th>
                <th style="min-width:200px">
                    Last Year Sales
                </th>
            </tr>
        </ng-template>
        <ng-template 
            pTemplate="groupheader" 
            let-company 
            let-isExpanded="expanded">
            <tr>
                <td colspan="3">
                    <button type="button" pButton pRipple 
                        [pRowToggler]="company"
                        class="p-button-text 
                        p-button-rounded p-button-plain mr-4" 
                        [icon]="isExpanded ? 
                        'pi pi-chevron-down' : 
                        'pi pi-chevron-right'">
                    </button>
                    <span class="font-bold">
                        {{company.sector}}
                    </span>
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="rowexpansion" let-company>
            <tr>
                <td style="min-width:200px">
                    {{company.name}}
                </td>
                <td style="min-width:200px">
                    {{company.thisYearSales}}
                </td>
                <td style="min-width:200px">
                    {{company.lastYearSales}}
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>
app.component.ts 
import { Component } from '@angular/core';

interface CompanyProfile {
    name: String;
    sector: 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",
                sector: "Technology",
                thisYearSales: "$ 2,000,000,000",
                lastYearSales: "$ 1,700,000,000",
                thisYearGrowth: "21%",
                lastYearGrowth: "15%",
            },
            {
                name: "Mac Donalds",
                sector: "Food",
                thisYearSales: "$ 1,100,000,000",
                lastYearSales: "$ 800,000,000",
                thisYearGrowth: "18%",
                lastYearGrowth: "15%",
            },
            {
                name: "Google",
                sector: "Technology",
                thisYearSales: "$ 1,800,000,000",
                lastYearSales: "$ 1,500,000,000",
                thisYearGrowth: "15%",
                lastYearGrowth: "13%",
            },
            {
                name: "Domino's",
                sector: "Food",
                thisYearSales: "$ 1,000,000,000",
                lastYearSales: "$ 800,000,000",
                thisYearGrowth: "13%",
                lastYearGrowth: "14%",
            },
            {
                name: "Meta",
                sector: "Technology",
                thisYearSales: "$ 1,100,000,000",
                lastYearSales: "$ 1,200,000,000",
                thisYearGrowth: "11%",
                lastYearGrowth: "12%",
            },
            {
                name: "Snapchat",
                sector: "Technology",
                thisYearSales: "$ 1,500,000,000",
                lastYearSales: "$ 1,200,000,000",
                thisYearGrowth: "16%",
                lastYearGrowth: "14%",
            },
            {
                name: "Tesla",
                sector: "AutoMobile",
                thisYearSales: "$ 1,300,000,000",
                lastYearSales: "$ 900,000,000",
                thisYearGrowth: "23%",
                lastYearGrowth: "16%",
            },
            {
                name: "Ford",
                sector: "AutoMobile",
                thisYearSales: "$ 700,000,000",
                lastYearSales: "$ 750,000,000",
                thisYearGrowth: "14%",
                lastYearGrowth: "15%",
            },
            {
                name: "Twitter",
                sector: "Technology",
                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 { ButtonModule } from 'primeng/button';
import { TableModule } from 'primeng/table';

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

export class AppModule { }

Output:

 

Example 3: In this example, we grouped the table rows using the rowspan property.

app.component.html 
<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table Row Group</h4>

    <p-table
        [value]="companyProfiles" 
        rowGroupMode="rowspan" 
        responsiveLayout="scroll"
        groupRowsBy="sector" 
        dataKey="sector">
        <ng-template pTemplate="header">
            <tr>
                <th>Sector</th>
                <th>Company</th>
                <th>This Year Sales</th>
                <th>Last Year Sales</th>
            </tr>
        </ng-template>
        <ng-template 
            pTemplate="body" 
            let-company 
            let-rowgroup="rowgroup" 
            let-rowspan="rowspan">
            <tr>
                <td 
                    *ngIf="rowgroup" 
                    [attr.rowspan]="rowspan">
                    <span class="font-bold">
                        {{company.sector}}
                    </span>
                </td>
                <td>{{company.name}}</td>
                <td>{{company.thisYearSales}}</td>
                <td>{{company.lastYearSales}}</td>
            </tr>
        </ng-template>
    </p-table>
</div>
app.component.ts 
import { Component } from '@angular/core';

interface CompanyProfile {
    name: String;
    sector: 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",
                sector: "Technology",
                thisYearSales: "$ 2,000,000,000",
                lastYearSales: "$ 1,700,000,000",
                thisYearGrowth: "21%",
                lastYearGrowth: "15%",
            },
            {
                name: "Mac Donalds",
                sector: "Food",
                thisYearSales: "$ 1,100,000,000",
                lastYearSales: "$ 800,000,000",
                thisYearGrowth: "18%",
                lastYearGrowth: "15%",
            },
            {
                name: "Google",
                sector: "Technology",
                thisYearSales: "$ 1,800,000,000",
                lastYearSales: "$ 1,500,000,000",
                thisYearGrowth: "15%",
                lastYearGrowth: "13%",
            },
            {
                name: "Domino's",
                sector: "Food",
                thisYearSales: "$ 1,000,000,000",
                lastYearSales: "$ 800,000,000",
                thisYearGrowth: "13%",
                lastYearGrowth: "14%",
            },
            {
                name: "Meta",
                sector: "Technology",
                thisYearSales: "$ 1,100,000,000",
                lastYearSales: "$ 1,200,000,000",
                thisYearGrowth: "11%",
                lastYearGrowth: "12%",
            },
            {
                name: "Snapchat",
                sector: "Technology",
                thisYearSales: "$ 1,500,000,000",
                lastYearSales: "$ 1,200,000,000",
                thisYearGrowth: "16%",
                lastYearGrowth: "14%",
            },
            {
                name: "Tesla",
                sector: "AutoMobile",
                thisYearSales: "$ 1,300,000,000",
                lastYearSales: "$ 900,000,000",
                thisYearGrowth: "23%",
                lastYearGrowth: "16%",
            },
            {
                name: "Ford",
                sector: "AutoMobile",
                thisYearSales: "$ 700,000,000",
                lastYearSales: "$ 750,000,000",
                thisYearGrowth: "14%",
                lastYearGrowth: "15%",
            },
            {
                name: "Twitter",
                sector: "Technology",
                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 { ButtonModule } from 'primeng/button';
import { TableModule } from 'primeng/table';

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

export class AppModule { }

Output:

 

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


Next Article
Angular PrimeNG Table Row Editing

W
writer01
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox