Open In App

Angular PrimeNG Table Row Group

Improve
Improve
Like Article
Like
Save
Share
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



Last Updated : 26 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads