Utilizing a Generic Pagination Class in Lightning Web Components - Part 2

When displaying large datasets in Salesforce, particularly with the lightning-datatable component, handling data effectively is key to providing a smooth user experience. The lightning-datatable component supports various data types and features. However, when rendering more than 100 rows of data on a single page, implementing pagination or infinite scrolling becomes essential to enhance performance and usability.

Below is an example of implementing pagination in Salesforce Lightning Web Components.

HTML File: oppListView.html

<template>
    <lightning-card title="Opportunities" icon-name="action:preview">
        <div class="slds-m-around_medium">
            <h2 class="slds-text-heading_medium slds-m-bottom_medium">
                {cardTitle}
            </h2>
            <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">
                {recordStart}-{recordEnd} of {totalRecords} | Page {page} of {totalPages}
            </p>
            <c-pagination onprevious={previousHandler} onnext={nextHandler}></c-pagination>
        </div>
    </lightning-card>
</template>

• lightning-datatable: Displays data in a table format.
• Pagination: Custom pagination component to handle navigation between records.
• Data Binding: Data and columns are dynamically populated using JavaScript.

---

JavaScript File: oppListView.js

import { LightningElement, wire, api } from 'lwc';
import getOpportunities from '@salesforce/apex/OpportunityController.getOpportunities';
const columns = [
    { label: 'Name', fieldName: 'Name' },
    { label: 'StageName', fieldName: 'StageName' },
    { label: 'Close Date', fieldName: 'CloseDate' },
    { label: 'Amount', fieldName: 'Amount' }, 
    { label: 'Type', fieldName: 'Type' },     
];
export default class OpportunityListViewPage extends LightningElement {
    page = 1;
    totalRecords = 0;
    setPageSize = 5;
    recordStart = 1;
    recordEnd = 0;
    totalPages = 0;
    @api cardTitle = 'All Opportunities';
    @wire(getOpportunities)
    recordValidate({ error, data }) {
        if (data) {
            this.items = data;
            this.totalRecords = data.length;
            this.totalPages = Math.ceil(this.totalRecords / this.setPageSize);
            this.data = this.items.slice(0, this.setPageSize);
            this.recordEnd = this.setPageSize;
            this.columns = columns;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.data = undefined;            
        }
    }
    recordForPage(page) {
        this.recordStart = (page - 1) * this.setPageSize;
        this.recordEnd = this.setPageSize * page;
        this.recordEnd = (this.recordEnd > this.totalRecords) ? this.totalRecords : this.recordEnd;
        this.data = this.items.slice(this.recordStart, this.recordEnd);
        this.recordStart = this.recordStart + 1;
    }
    previousHandler() {
        if (this.page > 1) {
            this.page = this.page - 1;
            this.recordForPage(this.page);
        }
    }
    nextHandler() {
        if (this.page < this.totalPages && this.page !== this.totalPages) {
            this.page = this.page + 1;
            this.recordForPage(this.page);
        }
    }
}

• Wire Service: Fetches data using the @wire decorator to call the getOpportunities Apex method.
• Pagination Logic: Handles record pagination by slicing the data array and updating the displayed page.
• Event Handlers: previousHandler and nextHandler manage pagination navigation.

---

Metadata Configuration: oppListView.js-meta.xml

<?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>
    <targetConfigs>
        <targetConfig targets="lightning__HomePage,lightning__RecordPage,lightning__AppPage">
            <property name="cardTitle" type="String" default="All Opportunities" label="Enter the Card title"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

This file exposes the Lightning Web Component to different Salesforce pages (Record, App, and Home pages), making it reusable across the Salesforce environment.

---

Conclusion

Implementing pagination in Lightning Web Components improves performance and user experience when dealing with large datasets. By following this approach, you can ensure that users interact efficiently with data in a tabular format using the lightning-datatable component.