Client Side Pagination (JavaScript) in LWC Salesforce

Pagination is the first step to start the LWC Coding (Definitely after the Hello World :D). Pagination is a pretty cool bundle of logic, UI, and Apex to start your assignments with.

With API version 45.0, the Lightning components can be build using 2 Salesforce programming models:  –

  • Lightning Web Components model
  • Aura Components model

LWC uses client JavaScript which your browser understands natively. This makes LWC super fast to work.

In Client-Side Pagination, we will fetch all data at once and then navigate between records in JS only. Pagination makes our UI more user-friendly and Client-side pagination makes it fast. Remember to use this only when you have a limited number of records not in lakhs.

Client-Side Pagination component features:
  • Generic component
  • Dynamic object Selection
  • Dynamic Fields Selection
  • Super Fast to navigate between records
  • Accordion to switch between your data table and object/field selection.
  • Set the number of records to display at once i.e., 10, 25, 50, 100

Demo GIF:

pagination demo

You can Dynamically select any object and fields of that object.

object selection pagination lwc  pagination fields selection

Step-1: Create an Apex controller

Our apex controller will fetch the object list, fields list, and records on processing. Here we are using a wrapper class which will return data to our LWC.

Create ClientSidePaginationController.cls Apex class.

 

Step-2: Now we will create the Client-Side Pagination Lightning Web Component.

Create a new web component clientSidePagination.

Now open the HTML file clientSidePagination.html and paste the below code

Now open the JS file clientSidePagination.js and paste the below code.