Angular PrimeNG Table Column Grouping
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.
app.component.html
< div style = "text-align: center" > < h2 style = "color: green" >w3wiki</ 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 > |
app.component.ts
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%" , } ]; } } |
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: Here is one more example to understand the use of the rowspan and colspan properties.
app.component.html
< div style = "text-align: center" > < h2 style = "color: green" >w3wiki</ 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 > |
app.component.ts
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%" , } ]; } } |
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:
Reference: http://primefaces.org/primeng/table
Contact Us