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.
Example 1: In this example, we used the subheader mode to group rows in the table.
< 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 >
|
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%" ,
}
];
}
} |
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.
< 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 >
|
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%" ,
}
];
}
} |
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.
< 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 >
|
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%" ,
}
];
}
} |
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