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.
Example 1: This example shows the use of the rowspan and colspan properties to group the sales column of the table.
< 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 >
|
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%" ,
}
];
}
} |
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.
< 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 >
|
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%" ,
}
];
}
} |
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