Hi All,

Greetings for the day!!!

Today I am going to discuss about SPFx pagination .

SPFx pagination is a technique used to display large amounts of data on a SharePoint page in smaller, more manageable chunks. This can be useful for performance reasons, as well as for usability reasons.

Before starting with this pagination steps please refer below article which continued here.

 https://knowledge-junction.in/2023/11/01/microsoft-365-how-to-retrieve-administrators-of-all-site-collections-in-sharepoint-framework-spfx-component-using-sharepoint-rest-api/

Why is pagination important in web development?

Pagination is crucial in web development because it enhances the user experience by dividing content into manageable chunks, improving performance, and making the interface more user-friendly.

Let’s look into SPFx Component :

Step 1 :

This code imports the necessary modules for creating a SharePoint Framework web part.

The ‘react‘ import is for using React for building the user interface, WebPartContext is for accessing the web part’s context, including SharePoint-specific information.

Step 2 :

We have defined variables in typescript.

Step 3 :

Initializing the state

Step 4 :

To change the current page in SPFx pagination, you can use the changePage() method. This method takes a new page number as a parameter and updates the state of the web part to reflect the new page.

Step 5 :

The itemsPerPage variable stores the number of items to display on each page.

The startIndex variable calculates the start index for the current page by multiplying the number of items per page by the current page number, and then subtracting 1.

The endIndex variable calculates the end index for the current page by adding the number of items per page to the start index.

The currentItems variable uses the to get the current page of data from the siteCollections array.

The slice() method takes two parameters: the start index and the end index.

The slice() method returns a new array that contains the elements of the original array from the start index to the end index, minus 1.

Step 6 :

To implement previous and next buttons in SPFx pagination, you can use the changePage() method. This method takes a new page number as a parameter and updates the state of the web part to reflect the new page.

Build a component using gulp build and gulp bundle for bundling files and for testing purpose I am using gulp serve so it opens the workbench.aspx.

and after successfully execution of above command, component will show the following result.

I hope this article will help you learn about the pagination In SharePoint Framework(SPFx) components.

References :

React JS for beginners – https://knowledge-junction.in/2020/08/23/react-js-for-beginners/

Can reach me on my social network –

LinkedIn –  https://www.linkedin.com/in/ganesh-barde-860302218/

Twitter –  https://twitter.com/GaneshB64176973?t=6N6FyRy-YOKAF5ujrI5QHQ&s=09

Thanks for reading. 

Have a wonderful day.