Exploring on Salesforce: Pagination using Salesforce Lightning Web Components with array slicing

Motivation behind this

Currently I am exploring Lightning Web Components (LWC) and trying to build pagination functionality using LWC. I was searching on google on the same, but didn't find this functionality on LWC, though there are tons of materials available on the same either using Lightning Aura Components or by Visualforce StandardSetController.

I have seen couple of solutions where developers either used offset to fetch page by page data every time directly from controller's SOQL query or taken entire dataset on the client side controller but every time looping through the array in the for loop to get paginated data.

Both of the solutions are not favorable to me, which motivates me to build a proof-of-concept and sharing a knowledge to Salesforce community members.

I have gone through Create and Dispatch Events documentation, there is some light on pagination but that topic is used to understand on how events are generated and dispatched.

Let's get started.

Use Case

Business has a requirement to view the tabular data retrieving from the database in a paginated way.

Developer wants to build the same using Lightning Web Components.

Expected Behavior

In the above demo, I am trying to show Account data is displaying page by page.

Before going to solution approach it is recommended to read Salesforce Lightning Web Components Cheat Sheet to have an understanding on different type of variables, dispatching events and calling apex classes' method from js controller.

Solution Approach

There are two components have been used.

1. Paginator component - which contains previous and next button as specified in Create and Dispatch Events documentation. For the sake of simplicity, take all the code as specified there.

2. displayPaginatedRecords component - which contains lightning datatable and Paginator component to implement entire functionality.

Let's first discuss about displayPaginatedRecords component.

displayPaginatedRecords.html

This html contains datatable and Paginator component using c-paginator which is listening events using onprevious and onnext event listeners.

<template>
    <lightning-card title="List of Accounts" icon-name="custom:custom9">
        <div class="slds-m-around_medium">
            <p class="slds-p-horizontal_medium">Display records in paginated way </p>
            <br></br>
            <div style="height: 180px;">
                <lightning-datatable 
                    key-field="id"
                    data={data}
                    columns={columns}>
                </lightning-datatable>
            </div>
        </div>
        <div class="slds-m-around_medium">
            <p class="slds-m-vertical_medium content">

                     Displaying {startingRecord} to {endingRecord} of {totalRecountCount} records.
                     Page {page} of {totalPage}. </p>
            <c-paginator onprevious={previousHandler} onnext={nextHandler}></c-paginator>
        </div>
    </lightning-card>
</template>

PaginationController.cls

This class has retrieveAccounts method which retrieves the data from Account object. For simplicity, WHERE clause and filter criteria have not given.

public with sharing class PaginationController {
    @AuraEnabled (cacheable=true)
    public static List<Account> retrieveAccounts(){
        return [SELECT Id, Name, Type, BillingCountry
                FROM Account
                LIMIT 1000];
    }
}

displayPaginatedRecords.js

Let's talk main important points about this js controller.

All the respective @track variables have been declared which have been used in the page, like page, startingRecord, endingRecord, pageSize, totalRecountCount, totalPage, data, columns. All are self-explanatory but written their usage as comments for each.
default pageSize = 5, so every page will display 5 records.
Datatable columns have been defined with label and fieldName attributes.
@wire to function i.e retrieveAccounts which performs following:

retrieves the data from Apex controller and assigns all data in items array

calculates totalRecountCount from data.length and calculates totalPage to be displayed.

Now, main part is: use of Array.slice() which returns selected elements from the array

this.data = this.items.slice(this.startingRecord, this.endingRecord);

The above principle has been applied in displayRecordPerPage method and everything is written as comments for better understanding.

For example, on 2nd page, label will shown as => "Displaying 6 to 10 of 23 records. Page 2 of 5"
page = 2; pageSize = 5; startingRecord = 5, endingRecord = 10
so, slice(5,10) will give 5th to 9th records.

previousHandler and nextHandler methods changes the page and calls displayRecordPerPage method

If we remove the comments from the method bodies then code will be compact. I have mentioned them for easy understanding.

/* eslint-disable no-console */
import { LightningElement, track, wire } from 'lwc';

import retrieveAccounts from '@salesforce/apex/PaginationController.retrieveAccounts';

//define columns of the datatable
const columns = [
    { label: 'Id', fieldName: 'Id' }, 
    { label: 'Name', fieldName: 'Name' },
    { label: 'Type', fieldName: 'Type' },
    { label: 'BillingCountry', fieldName: 'BillingCountry' },       
];
let i=0;

export default class DisplayPaginatedRecords extends LightningElement {
    @track page = 1; //this will initialize 1st page
    @track items = []; //it contains all the records.
    @track data = []; //data to be displayed in the table
    @track columns; //holds column info.
    @track startingRecord = 1; //start record position per page
    @track endingRecord = 0; //end record position per page
    @track pageSize = 5; //default value we are assigning
    @track totalRecountCount = 0; //total record count received from all retrieved records
    @track totalPage = 0; //total number of page is needed to display all records

    @wire(retrieveAccounts)
    wiredAccounts({ error, data }) {
        if (data) {
            //if you want to perform data transformation then following code will be used,
            //so that individual values to be assigned into each columns
            /*
            for(i=0; i<data.length; i++) {
                this.items = [...this.items,
                                    {Id:data[i].Id, 
                                    Name:data[i].Name, 
                                    Type:data[i].Type, 
                                    BillingCountry:data[i].BillingCountry}];                               
            }
            */
            this.items = data;
            this.totalRecountCount = data.length; //here it is 23
            this.totalPage = Math.ceil(this.totalRecountCount / this.pageSize); //here it is 5
            
            //initial data to be displayed ----------->
            //slice will take 0th element and ends with 5, but it doesn't include 5th element
            //so 0 to 4th rows will be displayed in the table
            this.data = this.items.slice(0,this.pageSize); 
            this.endingRecord = this.pageSize;
            this.columns = columns;

            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.data = undefined;
        }
    }

    //clicking on previous button this method will be called
    previousHandler() {
        if (this.page > 1) {
            this.page = this.page - 1; //decrease page by 1
            this.displayRecordPerPage(this.page);
        }
    }

    //clicking on next button this method will be called
    nextHandler() {
        if((this.page<this.totalPage) && this.page !== this.totalPage){
            this.page = this.page + 1; //increase page by 1
            this.displayRecordPerPage(this.page);            
        }             
    }

    //this method displays records page by page
    displayRecordPerPage(page){

        /*let's say for 2nd page, it will be => "Displaying 6 to 10 of 23 records. Page 2 of 5"
        page = 2; pageSize = 5; startingRecord = 5, endingRecord = 10
        so, slice(5,10) will give 5th to 9th records.
        */
        this.startingRecord = ((page -1) * this.pageSize) ;
        this.endingRecord = (this.pageSize * page);

        this.endingRecord = (this.endingRecord > this.totalRecountCount) 
                            ? this.totalRecountCount : this.endingRecord; 

        this.data = this.items.slice(this.startingRecord, this.endingRecord);

        //increment by 1 to display the startingRecord count, 
        //so for 2nd page, it will show "Displaying 6 to 10 of 23 records. Page 2 of 5"
        this.startingRecord = this.startingRecord + 1;
    }    
}

Let's take paginator component.

paginator.html

This html contains two button Previous and Next for firing events.

<template>
    <lightning-layout>
        <lightning-layout-item>
            <lightning-button label="Previous" icon-name="utility:chevronleft" onclick={previousHandler}></lightning-button>
        </lightning-layout-item>
        <lightning-layout-item flexibility="grow"></lightning-layout-item>
        <lightning-layout-item>
            <lightning-button label="Next" icon-name="utility:chevronright" icon-position="right" onclick={nextHandler}></lightning-button>
        </lightning-layout-item>
    </lightning-layout>
</template>

paginator.js

This js controller dispatches two events from event handlers.

// paginator.js
import { LightningElement } from 'lwc';

export default class Paginator extends LightningElement {
    previousHandler() {
        this.dispatchEvent(new CustomEvent('previous'));
    }

    nextHandler() {
        this.dispatchEvent(new CustomEvent('next'));
    }
}

displayPaginatedRecords.js-meta.xml

This meta xml contains the information as to where this component will be exposed.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="displayPaginatedRecords">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Now, from Lightning App Builder page, drag and drop the displayPaginatedRecords component and open the page.

Final Outcome

Finally, we are done and thanks for reading.

Exploring on Salesforce

Pages

Wednesday, September 25, 2019

Pagination using Salesforce Lightning Web Components with array slicing