Add Pagination For Accounts to LWC

Prepared By: Abhyash Timsina – 27 November 2022

Motivation: Sometimes you might have issues where you load too many accounts on a page and the response time is slow due to the volume. What if you could add ability for users to scroll previous or next on the page while limiting how many to show per page. Note – this example won’t have the full source code, but you can utilise as per your needs.

Source Code for paginationExample LWC (with annotation starting with //) - HTML

/**
 * Created by Abhyash Timsina on 26/11/2022.
 */


// add following to header. This allows for user to press previous or next buttons

<div style="float: right;">
    Page: {page} of   {totalPages}  :
    <button style="margin-right: 10px;" >
        <lightning-icon icon-name="utility:chevronleft" onclick={prevPage}></lightning-icon>
    </button>
    <button>
        <lightning-icon icon-name="utility:chevronright" onclick={nextPage}></lightning-icon>
    </button>

</div>

<template for:each={searchableAccounts} for:item="account" for:index="accountIndex">
    <tr key={account.Id} class="tr-account">
        <td class="slds-p-left_small white-bg sticky left-0 high-element">
                <div class="account-info">
                <lightning-input type="checkbox" class="left pt-7" id={account.idx}></lightning-input>
                <span class="bold-lt">{account.email}</span>
                <br/>
                {account.idx} - {account.value.Company} 
                <br/>
            </div>
        </td>
    </tr>

</template>

Source Code for paginationExample LWC (with annotation starting with //) - JS

* Created by Abhyash Timsina on 26/11/2022.
 */

@track searchableAccounts = [];

// set the number of accounts per page
pageLength = 50;

// tracks the page number
@track page = 1;

// variable to calculate total pages
@track totalPages;

// what is the current account index being selected
@api accountIndex;

// Add Code here on how you intend to retrieve a list of accounts. Perhaps add it to connectedCallback()

this.Accounts.forEach((account, idx) =>{
        account.idx = idx++;

});

let results = [];
if (this.page <= (Math.floor(this.Accounts.length / this.pageLength))) {
    this.page = 0;
    for (let i = 0; i < this.pageLength; i++) {
        if ((i + (this.page * this.pageLength)) < this.Accounts.length) {
            results.push(this.Accounts[i + (this.page * this.pageLength)]);
        }
    }
    this.searchableAccounts = results;

}

nextPage(){
    let results = [];
    if(this.page < (Math.floor(this.Accounts.length/this.pageLength))){
        this.page = this.page + 1;
        for(let i = 0; i < this.pageLength; i++){
            if((i + (this.page * this.pageLength)) < this.Accounts.length){
                results.push(this.Accounts[i + (this.page * this.pageLength)]);
            }
        }
        this.searchableAccounts = results;
    }

}

prevPage(){
    let results = [];
    if(this.page >= 1){
        this.page = this.page - 1;
        for(let i = 0; i < this.pageLength; i++){
            if((i + (this.page * this.pageLength)) < this.Accounts.length){
                results.push(this.Accounts[i + (this.page * this.pageLength)]);
            }
        }
        this.searchableAccounts = results;
    }

}

Package Link:

If you need help in installing and getting this working – please contact me on LinkedIn