Pagination in Salesforce LWC Data table

In Salesforce, the Lightning data table fetches and displays large amounts of data from the object records. To handle the bulk data, we do pagination, through which we can display the data distributed on multiple pages to navigate all pages to view records.

In this Salesforce tutorial, we will learn how to add pagination in Salesforce LWC data table.

Table of Contents

Add Pagination in Salesforce Lightning Data Table

In the example below, I have fetched the opportunity records data in the LWC data table, for which I have added pagination.

Now, follow the steps below to add pagination in the Salesforce Lightning data table.

1. Create a controller class for the Lightning data table’s controller class, enter the code below to handle the pagination logic for the data table.

public with sharing class OpportunityController {
    @AuraEnabled(cacheable=true)
    public static List<Opportunity> getOpportunities(Integer pageNumber, Integer pageSize) {
        return [SELECT Id, Name, Amount, StageName, CloseDate FROM Opportunity ORDER BY CreatedDate DESC LIMIT :pageSize OFFSET :((pageNumber - 1) * pageSize)];
    }
    @AuraEnabled(cacheable=true)
    public static Integer getTotalOpportunities() {
        return [SELECT COUNT() FROM Opportunity];
    }
}

In the above class method, “getOpportunities(pageNumber, pageSize)” will fetch the records based on the provided page number and page size. We have also used the OFFSET clause to skip the appropriate number of records for pagination.

2. Enter the code below in the HTML file of the data table to display the records and add the Previous and Next buttons for navigation.

<template>
    <lightning-card title="LWC table with pagination" icon-name="standard:opportunity">
        <template if:true={opportunities}>
            <lightning-datatable
                key-field="Id"
                data={opportunities}
                columns={columns}
                hide-checkbox-column="true">
            </lightning-datatable>
        </template>
        <div class="slds-m-top_medium slds-grid slds-grid_align-spread">
            <lightning-button label="Previous" onclick={handlePrevious} disabled={isPrevDisabled}></lightning-button>
            <p>Page {pageNumber} of {totalPages}</p>
            <lightning-button label="Next" onclick={handleNext} disabled={isNextDisabled}></lightning-button>
        </div>
    </lightning-card>
</template>

In the above code, we have pagination logic, where we have pageNumber and total pages to track pagination, while isPrevDisabled and isNextDisabled manage buttons.

The handlePrevious() and handleNext() functions adjust the displayed set of records based on the page number. The total number of pages is calculated using the dataset size and page size.

3. Now, use the code below in the JavaScript file to handle the logic of fetching records using the @wire decorator. We will also define the logic of tracking pagination states, like page number and total pages, and the logic of enabling and disabling buttons according to the navigation.

In the Lightning data table, I have displayed the fields Opportunity Name, Amount, Stage, and Close date.

import { LightningElement, wire, track } from 'lwc';
import getOpportunities from '@salesforce/apex/OpportunityController.getOpportunities';
import getTotalOpportunities from '@salesforce/apex/OpportunityController.getTotalOpportunities';

export default class LwcTableWithPagination extends LightningElement {
    @track opportunities = [];
    @track pageNumber = 1;
    @track totalPages = 1;
    pageSize = 10; 
    totalRecords = 0;

    columns = [
        { label: 'Opportunity Name', fieldName: 'Name', type: 'text' },
        { label: 'Amount', fieldName: 'Amount', type: 'currency' },
        { label: 'Stage', fieldName: 'StageName', type: 'text' },
        { label: 'Close Date', fieldName: 'CloseDate', type: 'date' }
    ];

    @wire(getTotalOpportunities)
    wiredTotalRecords({ error, data }) {
        if (data) {
            this.totalRecords = data;
            this.totalPages = Math.ceil(this.totalRecords / this.pageSize);
        } else if (error) {
            console.error(error);
        }
    }

    @wire(getOpportunities, { pageNumber: '$pageNumber', pageSize: '$pageSize' })
    wiredOpportunities({ error, data }) {
        if (data) {
            this.opportunities = data;
        } else if (error) {
            console.error(error);
        }
    }

    get isPrevDisabled() {
        return this.pageNumber <= 1;
    }

    get isNextDisabled() {
        return this.pageNumber >= this.totalPages;
    }

    handlePrevious() {
        if (this.pageNumber > 1) {
            this.pageNumber--;
        }
    }

    handleNext() {
        if (this.pageNumber < this.totalPages) {
            this.pageNumber++;
        }
    }
}

In the above code logic, the method getTotalOpportunities initially fetches the total count of the records. Then, the getOpportunities(pageNumber, pageSize) method will fetch the first page of records.

For the navigation logic, we have used the Next and Previous buttons. The Next click will increase the page number using the getOpportunities method. Similarly, the Previous method will decrease the page number and fetch previous records.

The @wire decorator that we have used will automatically update data when the page number changes.

4. Make the component visible to the lighting page using the below code in the meta.xml file inside the <LightningComponentBundle> tag.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

5. After this, navigate to the Lightning page and deploy the LWC data table on the Lightning page.

Add pagination to LWC data table in Salesforce

Here, in the Lightning data table, we can navigate to the pages using the button actions.

The number of records displayed in the data table will be according to the defined “PageSize.“

How to add pagination in Salesforce LWC data table

This way, we can add pagination to the Salesforce Lightning data table in LWC.

Conclusion

In this Salesforce tutorial, we have learned about how we can add pagination to the LWC Lightning data table. In the above steps, we created an Apex controller to fetch records, then an HTML file to display the table and navigation buttons, and a JavaScript file to handle pagination logic. To update the data automatically while navigating, we used @wire decorator.

By following the above steps, you can create an LWC data table with the pagination feature, where you can display a large number of records on multiple pages.

DOWNLOAD FREE AGENTFORCE EBOOK

FREE SALESFORCE FLOW EBOOK