LWC Pagination - Simple and Reusable Paginator in Salesforce Lightning

Datatables play a major role in accessing/viewing the multi records data at single place. When we have large number of records to display in a datatable, displaying all of them at a time is not a good idea and may face page load issues. To overcome these kind of scenarios, adding pagination to the datatable is a good idea/solution. Here is a nice and easy to use pagination implemented in lightning web components framework.

This is a simple reusable paginator component, we can plug it in for any lightning datatable. Let's get started with the components and the code part.

paginator.html

<template>
    <div class="slds-grid slds-grid_vertical-align-center slds-grid_align-spread">
        <div class="slds-col"><!--RECORDS PER PAGE-->
            <div style={controlPagination} class="slds-list_inline slds-p-bottom_xx-small customSelect">
                <label class="slds-text-color_weak slds-p-horizontal_x-small" for="recordsPerPage">Records per page:</label> 
                <div class="slds-select_container">
                    <select class="slds-select" id="recordsPerPage" onchange={handleRecordsPerPage}>
                        <template for:each={pageSizeOptions} for:item="option">
                            <option key={option} value={option}>{option}</option>
                        </template>
                    </select>
                </div>
            </div>
        </div>
        <div class="slds-col"><!--SEARCH BOX-->
            <div if:true={showSearchBox}>
                <div class="slds-p-horizontal_x-small slds-p-bottom_xx-small">
                    <lightning-input label="" type="search" placeholder="Search by any Col Value" variant="label-hidden" onchange={handleKeyChange}></lightning-input>
                </div>
            </div>
        </div>
        <div class="slds-col"><!--PAGE NAVIGATION-->
            <div style={controlPagination}>
                <div class="slds-col slds-p-bottom_xx-small">
                    <span style={controlPrevious}>
                        <lightning-button-icon icon-name="utility:left" variant="bare" size="medium" alternative-text="Previous Page" onclick={previousPage}></lightning-button-icon>
                    </span>
                    <label class="slds-text-color_weak slds-p-horizontal_x-small" for="pageNum">Page:</label> 
                    <input type="number" id="pageNum" value={pageNumber} maxlength="4" onkeypress={handlePageNumberChange} class="customInput" title="Go to a Page"></input>
                    <span>&nbsp;of&nbsp;<b id="totalPages">{totalPages}</b></span>
                    <span style={controlNext}>
                        <lightning-button-icon icon-name="utility:right" variant="bare" size="medium" alternative-text="Next Page" onclick={nextPage} class="slds-p-horizontal_x-small"></lightning-button-icon>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

paginator.js

import { LightningElement, api, track} from 'lwc';

const DELAY = 300;
const recordsPerPage = [5,10,25,50,100];
const pageNumber = 1;
const showIt = 'visibility:visible';
const hideIt = 'visibility:hidden'; //visibility keeps the component space, but display:none doesn't
export default class Paginator extends LightningElement {
    @api showSearchBox = false; //Show/hide search box; valid values are true/false
    @api showPagination; //Show/hide pagination; valid values are true/false
    @api pageSizeOptions = recordsPerPage; //Page size options; valid values are array of integers
    @api totalRecords; //Total no.of records; valid type is Integer
    @api records; //All records available in the data table; valid type is Array 
    @track pageSize; //No.of records to be displayed per page
    @track totalPages; //Total no.of pages
    @track pageNumber = pageNumber; //Page number
    @track searchKey; //Search Input
    @track controlPagination = showIt;
    @track controlPrevious = hideIt; //Controls the visibility of Previous page button
    @track controlNext = showIt; //Controls the visibility of Next page button
    recordsToDisplay = []; //Records to be displayed on the page

    //Called after the component finishes inserting to DOM
    connectedCallback() {
        if(this.pageSizeOptions && this.pageSizeOptions.length > 0) 
            this.pageSize = this.pageSizeOptions[0];
        else{
            this.pageSize = this.totalRecords;
            this.showPagination = false;
        }
        this.controlPagination = this.showPagination === false ? hideIt : showIt;
        this.setRecordsToDisplay();
    }

    handleRecordsPerPage(event){
        this.pageSize = event.target.value;
        this.setRecordsToDisplay();
    }
    handlePageNumberChange(event){
        if(event.keyCode === 13){
            this.pageNumber = event.target.value;
            this.setRecordsToDisplay();
        }
    }
    previousPage(){
        this.pageNumber = this.pageNumber-1;
        this.setRecordsToDisplay();
    }
    nextPage(){
        this.pageNumber = this.pageNumber+1;
        this.setRecordsToDisplay();
    }
    setRecordsToDisplay(){
        this.recordsToDisplay = [];
        if(!this.pageSize)
            this.pageSize = this.totalRecords;

        this.totalPages = Math.ceil(this.totalRecords/this.pageSize);

        this.setPaginationControls();

        for(let i=(this.pageNumber-1)*this.pageSize; i < this.pageNumber*this.pageSize; i++){
            if(i === this.totalRecords) break;
            this.recordsToDisplay.push(this.records[i]);
        }
        this.dispatchEvent(new CustomEvent('paginatorchange', {detail: this.recordsToDisplay})); //Send records to display on table to the parent component
    }
    setPaginationControls(){
        //Control Pre/Next buttons visibility by Total pages
        if(this.totalPages === 1){
            this.controlPrevious = hideIt;
            this.controlNext = hideIt;
        }else if(this.totalPages > 1){
           this.controlPrevious = showIt;
           this.controlNext = showIt;
        }
        //Control Pre/Next buttons visibility by Page number
        if(this.pageNumber <= 1){
            this.pageNumber = 1;
            this.controlPrevious = hideIt;
        }else if(this.pageNumber >= this.totalPages){
            this.pageNumber = this.totalPages;
            this.controlNext = hideIt;
        }
        //Control Pre/Next buttons visibility by Pagination visibility
        if(this.controlPagination === hideIt){
            this.controlPrevious = hideIt;
            this.controlNext = hideIt;
        }
    }
    handleKeyChange(event) {
        window.clearTimeout(this.delayTimeout);
        const searchKey = event.target.value;
        if(searchKey){
            this.delayTimeout = setTimeout(() => {
                this.controlPagination = hideIt;
                this.setPaginationControls();

                this.searchKey = searchKey;
                //Use other field name here in place of 'Name' field if you want to search by other field
                //this.recordsToDisplay = this.records.filter(rec => rec.includes(searchKey));
                //Search with any column value (Updated as per the feedback)
                this.recordsToDisplay = this.records.filter(rec => JSON.stringify(rec).includes(searchKey));
                if(Array.isArray(this.recordsToDisplay) && this.recordsToDisplay.length > 0)
                    this.dispatchEvent(new CustomEvent('paginatorchange', {detail: this.recordsToDisplay})); //Send records to display on table to the parent component
            }, DELAY);
        }else{
            this.controlPagination = showIt;
            this.setRecordsToDisplay();
        }        
    }
}

paginator.css

.customSelect select {
    padding-right: 1.25rem;
    min-height: inherit;
    line-height: normal;
    height: 1.4rem;    
}
.customSelect label {
    margin-top: .1rem;
}
.customSelect .slds-select_container::before {
    border-bottom: 0;
}
.customInput {
    width: 3rem;
    height: 1.4rem;
    text-align: center;
    border: 1px solid #dddbda;
    border-radius: 3px;
    background-color:#fff;
}

oppTable.html

<template>
    <lightning-card title="Data Table with Pagination">
        <template if:true={showTable}>
            <c-paginator records={opps} 
                        total-records={opps.length} 
                        show-search-box="true" 
                        onpaginatorchange={handlePaginatorChange}>
            </c-paginator>
            <lightning-datatable key-field="Id" 
                                data={recordsToDisplay} 
                                columns={columns}
                                hide-checkbox-column
                                show-row-number-column
                                row-number-offset={rowNumberOffset}>
            </lightning-datatable>
        </template>
    </lightning-card>
</template>

oppTable.js

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

const columns = [
    { label:'Opportunity Name', fieldName: 'oppLink', type: 'url', typeAttributes: {label: {fieldName: 'Name'}, tooltip:'Go to detail page', target: '_blank'}},
    { label: 'Type', fieldName: 'Type', type: 'text' },
    { label: 'Stage', fieldName: 'StageName', type: 'text', },
    { label: 'Amount', fieldName: 'Amount', type: 'currency', cellAttributes: { alignment: 'left' } },
    { label: 'Close Date', fieldName: 'CloseDate', type: 'date', typeAttributes:{timeZone:'UTC', year:'numeric', month:'numeric', day:'numeric'}},
];
export default class OppTable extends LightningElement {
    @track error;
    @track columns = columns;
    @track opps; //All opportunities available for data table    
    @track showTable = false; //Used to render table after we get the data from apex controller    
    @track recordsToDisplay = []; //Records to be displayed on the page
    @track rowNumberOffset; //Row number

    @wire(getOpps)
    wopps({error,data}){
        if(data){
            let recs = [];
            for(let i=0; i<data.length; i++){
                let opp = {};
                opp.rowNumber = ''+(i+1);
                opp.oppLink = '/'+data[i].Id;
                opp = Object.assign(opp, data[i]);
                recs.push(opp);
            }
            this.opps = recs;
            this.showTable = true;
        }else{
            this.error = error;
        }       
    }
    //Capture the event fired from the paginator component
    handlePaginatorChange(event){
        this.recordsToDisplay = event.detail;
        this.rowNumberOffset = this.recordsToDisplay[0].rowNumber-1;
    }
}

OppTableContoller.apxc

public with sharing class OppTableContoller {    
    @AuraEnabled(cacheable=true)
    public static List getOpportunities() {
        return [SELECT Id, Name, Type, StageName, Amount, CloseDate, OwnerId, Owner.Name FROM Opportunity];
    }
}

PS: Thanks for checking this, hope this helps! Please share your feedback/suggestions.