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

Apart from the mentioned required features, it also supports various optional features such as:

• The pageLinks property shows the number of page link displayed at a time.
• The rowsPerPageOptions property has a provision to change the number of rows to be displayed (comma separated values as an array) in a single page.
• The totalRecords property displays the logical records which are useful for the lazy loading feature.
• The paginatorPosition property displays the paginator with possible values of top, bottom, and both. The default position of paginator is bottom.

The pagination example, which is used to display a lot of browser's information, would be written as follows:

<p-dataTable [value]="browsers" [rows]="10" [paginator]="true" 
  [pageLinks]="3" [rowsPerPageOptions]="[10,15,20]" 
  paginatorPosition="both"(onPage)="onPage($event)">
  <p-column field="engine" header="Engine"></p-column>
  <p-column field="browser" header="Browser"></p-column>
  <p-column field="platform" header="Platform"></p-column>
  <p-column field="grade" header="Grade"></p-column>
</p-dataTable>

The following screenshot shows a snapshot result with a pagination feature as an example:

We can also use an external paginator using the Paginator component apart from the one built into DataTable. The pagination feature also provides the onPage event callback (whereas the external paginator provides the onPageChange callback), which will be invoked on pagination. Refer to the event details section for more information.