The DataList component supports facets such as header and footer for content using p-header and p-footer tags. In order to improve the user experience on large datasets, it supports the pagination feature. This feature is enabled by setting the paginator property as true and it sets a number of rows to be displayed using the rows property. Apart from these mandatory settings, there are some optional customized settings for pagination. Among all those optional properties, paginatorPosition is used to display the paginator either in top, bottom, or both positions; rowsPerPageOptions is used to display a drop-down with a possible number of rows to be displayed in a page, and emptyMessage is used to display a data list body when no records exist. Pagination also supports the onPage event callback, which will be invoked on page navigation. Refer to the events section for more details.

The DataList component with facets and pagination features to display browser information would be as follows:

<p-dataList [value]="advancedBrowsers" [paginator]="true" [rows]="5"
  (onPage)="onPagination($event)" [rowsPerPageOptions]="[5,10,15]"
  [paginatorPosition]="both" [emptyMessage]="'No records found'">
  <p-header>
    List of Browsers
  </p-header>
    .... // Content
  <p-footer>
    Note: Grades are 3 types.A,B and C.
  </p-footer>
</p-dataList>

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

All the pagination controls are customizable with the options provided in the DataList component.