Dynamic Pagination is a useful technique in Salesforce used for splitting large datasets into smaller and more manageable pages. The main purpose of “Dynamic Pagination” is to boost the user experience while dealing with a large amount of information.
So, creating a Dynamic Pagination is important!
In this blog, we will show you how to create a Dynamic Pagination for the Contact records table. Here, we have created two LWC components – one is “Parent” which shows the table of contact records, and the other is “Child” which manages the table Pagination.
Please Note: We have created an apex class which is used to query all contact records.
1. Apex Class (allContactRecords.apex)
This apex class is used to fetch the Contact records:
2. Parent Component (contactPagination)
This component fetches and displays Contact records, and handles record size per page.
contactPagination.html :
contactPagination.js :
3. Child Component (Pagination)
This component handles the Pagination logic of the table.
Pagination.html:
pagination.js:
Features
Records Per Page: You can change the record size of the table as per its need.
Pagination: The Pagination is updated when the record size is changed.
Conclusion
In a nutshell, Dynamic Pagination is useful while dealing with large data amounts and we need to see only a limited amount of records in the table. As a result, it will be more useful & enhance the user experience.
Meanwhile, stay tuned for more updates!
Here’s a demo url for your better understanding
