Implicit Pagination
<p-table [value]="customersImplicitPagination" [paginator]="true" [rows]="10" [showCurrentPageReport]="true" responsiveLayout="scroll" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [rowsPerPageOptions]="[10,25,50]">
<ng-template pTemplate="caption">
Implicit Pagination
</ng-template>
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Country</th>
<th>Company</th>
<th>Representative</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td>{ { customer.name } }</td>
<td>{ { customer.country.name } }</td>
<td>{ { customer.company } }</td>
<td>{ { customer.representative.name } }</td>
</tr>
</ng-template>
<ng-template pTemplate="paginatorleft">
<p-button type="button" icon="pi pi-plus" styleClass="p-button-text"></p-button>
</ng-template>
<ng-template pTemplate="paginatorright">
<p-button type="button" icon="pi pi-cloud" styleClass="p-button-text"></p-button>
</ng-template>
</p-table>
Programmatic Control
<div class="p-mb-3">
<p-button type="button" icon="pi pi-chevron-left" (click)="prev()" [disabled]="isFirstPage()" styleClass="p-button-text"></p-button>
<p-button type="button" icon="pi pi-refresh" (click)="reset()" styleClass="p-button-text"></p-button>
<p-button type="button" icon="pi pi-chevron-right" (click)="next()" [disabled]="isLastPage()" styleClass="p-button-text"></p-button>
</div>
<p-table [value]="customersProgrammaticControl" [paginator]="true" [rows]="rows" [showCurrentPageReport]="true" [(first)]="first" responsiveLayout="scroll" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [rowsPerPageOptions]="[10, 25, 50]">
<ng-template pTemplate="caption">Programmatic Control</ng-template>
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Country</th>
<th>Company</th>
<th>Representative</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td>{ { customer.name } }</td>
<td>{ { customer.country.name } }</td>
<td>{ { customer.company } }</td>
<td>{ { customer.representative.name } }</td>
</tr>
</ng-template>
</p-table>