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.

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