Angular + PrimeNG DataTable Paginator Example
Angular PrimeNG Tutorial :
Overview
The new Angular 9 version is available now. The newest release again includes improvements in performance, a smaller bundle size and many more. Moreover, the default is the Ivy renderer. Check out Angular 9 features.
PrimeNG 9.0.0 release has also recently been available to support Angular 9 and Ivy for first class components and to improve components.
In this article, we begin exploring getting started with latest version of angular 9 and PrimeNg 9 with use of the PrimeNG DataTable component with an Paginator example.
We will follow below steps to build this example
- First we will create an Angular 9 Project + PrimeNG 9 DataTable Project
- Understand Need of pagination
- Various optional features available with PrimeNG DataTable pagination
- Implement the Example of PrimeNg DataTable pagination with sample data
Lets start
Step 1 : Create an Angular 9 Project + PrimeNG 9 DataTable Project:
In previous tutorial we learned how to create an Angular 9 Project + PrimeNG 9 DataTable . Now We will be modifying the example to enable pagination.
Checkout our related posts :
Step 2 :Understand Need of pagination
If the table is backed by huge datasets, then displaying all of the data on a single page looks awkward and it is going to be a nightmare for the user when scrolling millions of records.
Lets create a mock dataset data.json under asset folder with below data :
[{
"id": 11,
"flightNumber": "AR1298",
"origin": "NAX",
"destination": "AHR",
"departDay": "Monday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 199.99
},
{
"id": 12,
"flightNumber": "AR1201",
"origin": "NAX",
"destination": "AHR",
"departDay": "Tuesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 499.99
},
{
"id": 13,
"flightNumber": "AR1211",
"origin": "AHR",
"destination": "ARN",
"departDay": "Wednesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 399.99
},
{
"id": 14,
"flightNumber": "AR2221",
"origin": "AHR",
"destination": "NRT",
"departDay": "Wednesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 999.99
},
{
"id": 15,
"flightNumber": "AR2211",
"origin": "NRT",
"destination": "AHR",
"departDay": "Thursday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 699.99
},
{
"id": 11,
"flightNumber": "FS1298",
"origin": "NAX",
"destination": "AHR",
"departDay": "Monday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 199.99
},
{
"id": 12,
"flightNumber": "FS1201",
"origin": "NAX",
"destination": "AHR",
"departDay": "Tuesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 499.99
},
{
"id": 13,
"flightNumber": "FS1211",
"origin": "AHR",
"destination": "ARN",
"departDay": "Wednesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 399.99
},
{
"id": 14,
"flightNumber": "FS2211",
"origin": "AHR",
"destination": "NRT",
"departDay": "Wednesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 999.99
},
{
"id": 15,
"flightNumber": "FS2211",
"origin": "NRT",
"destination": "AHR",
"departDay": "Thursday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 699.99
},
{
"id": 11,
"flightNumber": "AI1298",
"origin": "NAX",
"destination": "AHR",
"departDay": "Monday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 199.99
},
{
"id": 12,
"flightNumber": "AI1201",
"origin": "NAX",
"destination": "AHR",
"departDay": "Tuesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 499.99
},
{
"id": 13,
"flightNumber": "AI1211",
"origin": "AHR",
"destination": "ARN",
"departDay": "Wednesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 399.99
},
{
"id": 14,
"flightNumber": "AI2211",
"origin": "AHR",
"destination": "NRT",
"departDay": "Wednesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 999.99
},
{
"id": 15,
"flightNumber": "AI2211",
"origin": "NRT",
"destination": "AHR",
"departDay": "Thursday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 699.99
},
{
"id": 11,
"flightNumber": "IG1298",
"origin": "NAX",
"destination": "AHR",
"departDay": "Monday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 199.99
},
{
"id": 12,
"flightNumber": "IG1201",
"origin": "NAX",
"destination": "AHR",
"departDay": "Tuesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 499.99
},
{
"id": 13,
"flightNumber": "IG1211",
"origin": "AHR",
"destination": "ARN",
"departDay": "Wednesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 399.99
},
{
"id": 14,
"flightNumber": "IG2211",
"origin": "AHR",
"destination": "NRT",
"departDay": "Wednesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 999.99
},
{
"id": 15,
"flightNumber": "IG2211",
"origin": "NRT",
"destination": "AHR",
"departDay": "Thursday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 699.99
},
{
"id": 11,
"flightNumber": "AR1298",
"origin": "NAX",
"destination": "AHR",
"departDay": "Monday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 199.99
},
{
"id": 12,
"flightNumber": "AR1201",
"origin": "NAX",
"destination": "AHR",
"departDay": "Tuesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 499.99
},
{
"id": 13,
"flightNumber": "AR1211",
"origin": "AHR",
"destination": "ARN",
"departDay": "Wednesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 399.99
},
{
"id": 14,
"flightNumber": "AR2211",
"origin": "AHR",
"destination": "NRT",
"departDay": "Wednesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 999.99
},
{
"id": 15,
"flightNumber": "AR2211",
"origin": "NRT",
"destination": "AHR",
"departDay": "Thursday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 699.99
},
{
"id": 11,
"flightNumber": "AR1298",
"origin": "NAX",
"destination": "AHR",
"departDay": "Monday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 199.99
},
{
"id": 12,
"flightNumber": "AR1201",
"origin": "NAX",
"destination": "AHR",
"departDay": "Tuesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 499.99
},
{
"id": 13,
"flightNumber": "AR1211",
"origin": "AHR",
"destination": "ARN",
"departDay": "Wednesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 399.99
},
{
"id": 14,
"flightNumber": "AR2211",
"origin": "AHR",
"destination": "NRT",
"departDay": "Wednesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 999.99
},
{
"id": 15,
"flightNumber": "AR2211",
"origin": "NRT",
"destination": "AHR",
"departDay": "Thursday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 699.99
},
{
"id": 11,
"flightNumber": "AR1298",
"origin": "NAX",
"destination": "AHR",
"departDay": "Monday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 199.99
},
{
"id": 12,
"flightNumber": "AR1201",
"origin": "NAX",
"destination": "AHR",
"departDay": "Tuesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 499.99
},
{
"id": 13,
"flightNumber": "AR1211",
"origin": "AHR",
"destination": "ARN",
"departDay": "Wednesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 399.99
},
{
"id": 14,
"flightNumber": "AR2211",
"origin": "AHR",
"destination": "NRT",
"departDay": "Wednesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 999.99
},
{
"id": 15,
"flightNumber": "AR2211",
"origin": "NRT",
"destination": "AHR",
"departDay": "Thursday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 699.99
},
{
"id": 11,
"flightNumber": "AR1298",
"origin": "NAX",
"destination": "AHR",
"departDay": "Monday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 199.99
},
{
"id": 12,
"flightNumber": "AR1201",
"origin": "NAX",
"destination": "AHR",
"departDay": "Tuesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 499.99
},
{
"id": 13,
"flightNumber": "AR1211",
"origin": "AHR",
"destination": "ARN",
"departDay": "Wednesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 399.99
},
{
"id": 14,
"flightNumber": "AR2211",
"origin": "AHR",
"destination": "NRT",
"departDay": "Wednesday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 999.99
},
{
"id": 15,
"flightNumber": "AR2211",
"origin": "NRT",
"destination": "AHR",
"departDay": "Thursday",
"departTime": "09:00",
"arriveDay": "Monday",
"arriveTime": "09:00",
"price": 699.99
}
]Step 3: Understand Various optional features available with PrimeNG DataTable pagination
The DataTable component supports a pagination feature just by enabling the "paginator" property and the "rows" option to display the number of records in the page.
-
In addition to the required features mentioned above, it also supports various optional features
such as: :
- The "pageLinks" property shows the number of page links shown at a time.
- The "rowsPerPageOptions" property has a provision to change the number of rows to display (comma separated values as an array) in a single page.
- The "totalRecords" property displays logical records that are useful for a lazy loading feature.
- The "paginatorPosition" property displays the paginator with possible values of top, bottom, and both. The default position of paginator is bottom.
Step 4: Implement PrimeNg DataTable pagination Example
Flight Model
Since our Angular application will fetch from and persist Flight entities in the database, let's update the domain model flight with TypeScript.
Here is code for our my flight Model
export interface Flight{
id : number;
flightNumber : string;
origin : string;
destination : string;
departDay : string;
departTime : string;
arriveDay : string;
arriveTime : string;
price : number;
}Flight service
Lets modify our flight service to read large dataset from data.json
import { Injectable } from '@angular/core';
import { Flight } from "../model/flight";
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from "rxjs";
@Injectable()
export class FlightsService {
private MYFLIGHTS: Flight[] = [];
constructor(private http: HttpClient) {
}
// to test with service api
public getFlightsData() : Observable<Flight[]>{
let url = "assets/data.json";
return this.http.get<Flight[]>(url);
}
}Update My Flights Component
Lets begin with adding paginator parameters in My Flights component Open a command prompt and use the following command-
Here is code for our my flight template component
<p-table *ngIf="flights" [value]="flights" [paginator]="true"
[rows]="10" [showCurrentPageReport]="true"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [rowsPerPageOptions]="[10,15,20]">
<ng-template pTemplate="header">
<tr>
<th>Flight</th>
<th>From</th>
<th>To</th>
<th>Depart Day</th>
<th>Price ($)</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-flight>
<tr>
<td>{{flight.flightNumber}}</td>
<td>{{flight.origin}}</td>
<td>{{flight.destination}}</td>
<td>{{flight.departDay}}</td>
<td>{{flight.price}}</td>
</tr>
</ng-template>
</p-table>In app.component.ts we will get dataset from api as below
import { Component, OnInit } from '@angular/core';
import {Flight} from '../model/flight';
import { FlightsService } from 'src/app/service/flights.service';
@Component({
selector: 'app-my-flights',
templateUrl: './my-flights.component.html',
styleUrls: ['./my-flights.component.scss']
})
export class MyFlightsComponent implements OnInit {
public flights : Flight[];
constructor(private flightService: FlightsService) {
this.getFlightsData();
}
ngOnInit() {
}
// get the data from backend service api
private getFlightsData() {
this.flightService.getFlightsData().subscribe(data => {
this.flights = data;
});
}
}
Now If we goto localhost:4200 and we can see the following output with paginated data
Download Source Code
The full source code for this article can be found on below.Download it here - Angular 9 PrimeNG 9 Datatable Pagination Example