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

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