Angular PrimeNG Table Paginator

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.

Project Structure

Example 1: This example shows the simple use of table paginator by setting the paginator property to true and rows property to 4.

app.component.html

<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>

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[] = [];
    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%",
            },
        ];
    }

}

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: In this example, we control the table pagination programmatically using custom buttons.

app.component.html

<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>

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 {

    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;
    }

}

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,
        BrowserAnimationsModule,
        TableModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/table/page