Paging is a nice way to get faster access to data as well as give a nice user experience to browse through huge data. While working with SharePoint lists and libraries having a huge number of items or documents paging makes the navigation through data easy.

In this article, we will explore using the PnP Control for paging (Pagination Control) to navigate from a large list.SharePoint-2013-Hosting

Develop SPFx Solution

We will develop the SPFx web part as shown below:

In the solution, create a model at src\webparts\pnPPagination\models\ISPItem.ts to represent a SharePoint list item.

In the web part, implement a method to read SharePoint list items. For simplicity, I am using a mock method to return dummy list items. I used the website Generate Random CSV to generate some random text for our list data.

Define a State

Let us define a state to store all items.

Update the render method to display the list items.

The result will be displayed as follows:

Paging with PnP Pagination Control

Install @pnp/spfx-controls-react

Now let us implement the paging with PnP pagination control. Run the below command to install PnP Controls in the solution:

Update state

Update the state to include paginated items.

Use PnP pagination control

Import the pagination control to React component as follows:

Add the pagination control in the render method as follows:

The selected page in the Pagination control can be retrieved with below method:

Update the componentDidMount method to show first set of paginated items with pageSize as 5.

The End Result

When deployed, the web part works as below:

Paging is a nicer way to present large data. PnP Control for paging (Pagination Control) is a flexible control to implement paging in an easy way.