Angular PrimeNG Table Row Group
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.
app.component.html
< div style = "text-align: center" > < h2 style = "color: green" >w3wiki</ 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" >w3wiki</ 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" >w3wiki</ 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