Client Side Pagination (JavaScript) in LWC Salesforce

Suyash N
Suyash N 3.1k Views Add a Comment

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.

Open the meta file clientSidePagination.js-meta.xml and paste the below code.

Step-3: Now we will call the component.

Create a test aura application and paste the below code in it.

To see the output of the component, go to record page > click on setting gear on top and click on Edit Page. Now drop your component on the screen. Save and Activate the Page to Org Default. Now go back to your record. Your component is visible now.

client side pagination

You can also place this component on App Page and Home Page.

Also, check – Server-Side Pagination in LWC

Your component is now ready to use. Cheers …. Happy Coding … 🙂

Share This Article
Leave a comment
Notify of
Inline Feedbacks
View all comments