Angular PrimeNG is a UI toolkit to make web applications with Angular. It consists 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 Paginator.
A Table Component is used to show some data in tabular form. Pagination is used in a table when there are a large number of rows and cannot be displayed in a single go. The pagination can be enabled by setting the paginator property of the table to true and by setting the number of rows to show on a single page using the rows property.
Syntax:
<p-table [value]="companyProfiles" [paginator]="true" [rows]="4" [columns]="columns"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let column of columns"> {{column.name}} </th> </tr> </ng-template> <ng-template pTemplate="body" let-rowData let-columns="columns"> <tr> <td *ngFor="let column of columns"> {{rowData[column.field]}} </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 simple use of table paginator by setting the paginator property to true and rows property to 4.
< div style = "text-align: center" >
< h2 style = "color: green" >GeeksforGeeks</ h2 >
< h4 >Angular PrimeNG Table Paginator</ h4 >
< p-table [value]="companyProfiles"
[paginator]="true"
[rows]="4"
[columns]="columns">
< ng-template pTemplate = "header" let-columns>
< tr >
< th * ngFor = "let column of columns" >
{{column.name}}
</ th >
</ tr >
</ ng-template >
< ng-template pTemplate = "body" let-rowData
let-columns = "columns" >
< tr >
< td * ngFor = "let column of columns" >
{{rowData[column.field]}}
</ 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[] = [];
columns: any[] = [
{
name: "Sector" ,
field: "sector" ,
},
{
name: "Company" ,
field: "name" ,
},
{
name: "This Year Sales" ,
field: "thisYearSales" ,
},
{
name: "Last Year Sales" ,
field: "lastYearSales" ,
},
];
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%" ,
},
{
name: "Reliance Jio" ,
sector: "Telecom" ,
thisYearSales: "$ 800,000,000" ,
lastYearSales: "$ 800,000,000" ,
thisYearGrowth: "13%" ,
lastYearGrowth: "13%" ,
},
{
name: "H&M" ,
sector: "Clothing" ,
thisYearSales: "$ 1,600,000,000" ,
lastYearSales: "$ 1,400,000,000" ,
thisYearGrowth: "17%" ,
lastYearGrowth: "16%" ,
},
{
name: "Nike" ,
sector: "Sports" ,
thisYearSales: "$ 2,200,000,000" ,
lastYearSales: "$ 2,400,000,000" ,
thisYearGrowth: "18%" ,
lastYearGrowth: "22%" ,
},
{
name: "Adidas" ,
sector: "Sports" ,
thisYearSales: "$ 2,300,000,000" ,
lastYearSales: "$ 2,100,000,000" ,
thisYearGrowth: "24%" ,
lastYearGrowth: "21%" ,
},
{
name: "Red Chief" ,
sector: "Clothing" ,
thisYearSales: "$ 800,000,000" ,
lastYearSales: "$ 600,000,000" ,
thisYearGrowth: "19%" ,
lastYearGrowth: "15%" ,
},
];
}
} |
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: In this example, we control the table pagination programmatically using custom buttons.
< div style = "text-align: center" >
< h2 style = "color: green" >GeeksforGeeks</ h2 >
< h4 >Angular PrimeNG Table Paginator</ h4 >
< div class = "mb-4" >
< p-button type = "button" class = "mr-3" label = "Previous"
(click)="previous()"
[disabled]="isFirst()">
</ p-button >
< p-button type = "button" class = "mr-3" label = "Reset" (click)="reset()">
</ p-button >
< p-button type = "button" label = "Next" (click)="next()"
[disabled]="isLast()">
</ p-button >
</ div >
< p-table [value]="companyProfiles"
[paginator]="true"
[rows]="rows"
[(first)]="firstIndex"
[columns]="columns">
< ng-template pTemplate = "header" let-columns>
< tr >
< th * ngFor = "let column of columns" >
{{column.name}}
</ th >
</ tr >
</ ng-template >
< ng-template pTemplate = "body" let-rowData
let-columns = "columns" >
< tr >
< td * ngFor = "let column of columns" >
{{rowData[column.field]}}
</ 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 { firstIndex = 0;
rows = 5;
companyProfiles: CompanyProfile[] = [];
columns: any[] = [
{
name: "Sector" ,
field: "sector" ,
},
{
name: "Company" ,
field: "name" ,
},
{
name: "This Year Sales" ,
field: "thisYearSales" ,
},
{
name: "Last Year Sales" ,
field: "lastYearSales" ,
},
];
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%" ,
},
{
name: "Reliance Jio" ,
sector: "Telecom" ,
thisYearSales: "$ 800,000,000" ,
lastYearSales: "$ 800,000,000" ,
thisYearGrowth: "13%" ,
lastYearGrowth: "13%" ,
},
{
name: "H&M" ,
sector: "Clothing" ,
thisYearSales: "$ 1,600,000,000" ,
lastYearSales: "$ 1,400,000,000" ,
thisYearGrowth: "17%" ,
lastYearGrowth: "16%" ,
},
{
name: "Nike" ,
sector: "Sports" ,
thisYearSales: "$ 2,200,000,000" ,
lastYearSales: "$ 2,400,000,000" ,
thisYearGrowth: "18%" ,
lastYearGrowth: "22%" ,
},
{
name: "Adidas" ,
sector: "Sports" ,
thisYearSales: "$ 2,300,000,000" ,
lastYearSales: "$ 2,100,000,000" ,
thisYearGrowth: "24%" ,
lastYearGrowth: "21%" ,
},
{
name: "Red Chief" ,
sector: "Clothing" ,
thisYearSales: "$ 800,000,000" ,
lastYearSales: "$ 600,000,000" ,
thisYearGrowth: "19%" ,
lastYearGrowth: "15%" ,
},
];
}
reset() {
//Set first index to 0
this .firstIndex = 0;
}
previous() {
// Set first index of page to firstIndex - rows
if (( this .firstIndex - this .rows) < 0) return ;
this .firstIndex = this .firstIndex - this .rows;
}
next() {
// Set first index of page to firstIndex + rows
if (( this .firstIndex + this .rows) >
this .companyProfiles.length) return ;
this .firstIndex = this .firstIndex + this .rows;
}
isFirst(): boolean {
return this .companyProfiles ?
this .firstIndex === 0 : true ;
}
isLast(): boolean {
return this .companyProfiles ?
( this .firstIndex + this .rows) >
this .companyProfiles.length : true ;
}
} |
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,
BrowserAnimationsModule,
TableModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
}) export class AppModule { } |
Output:
Reference: http://primefaces.org/primeng/table/page