When building LWC(Lightning Web Components) in Salesforce, one of the most common requirements is to display large sets of data in chunks, instead of showing everything at once. This is called pagination.

In this blog post, we’ll show pagination through a simple and complete LWC example that uses pagination to show paragraph content. We’ll explain how pagination works, what the code does, and how it all comes together.

What Is Pagination?

Suppose we have 50 paragraphs to display on UI but If we show all 100 items at once, we may get overwhelmed and our page may load slowly.Instead, we split the list into multiple pages—each showing 5 or 10 paragraphs in one page.

By doing this:

• Gives users a better experience
• Improves performance
• Makes the UI cleaner

So now we will create an LWC that explains how to implement pagination step by step in detail.

What We’re Building

We’re building a Lightning Web Component that:

• Contains a list of 20 dummy paragraphs.
• Shows 5 paragraphs per page.
• Has Next and Previous buttons to move between pages.
• Displays the current page number and total pages.

Component Structure

We have 3 files:

1. paginationComponent.html – HTML template for UI
2. paginationComponent.js – JavaScript logic
3. paginationComponent.js-meta.xml – Metadata config for Lightning App Builder

paginationComponent.html

<template>
    <lightning-card title="Pagination Demo " icon-name="custom:custom63">
        <div class="slds-p-horizontal_medium">
            <template for:each={visibleItems} for:item="item">
                <p key={item.id} class="slds-m-vertical_small">{item.text}</p>
            </template>

            <div class="slds-m-top_medium slds-align_absolute-center">
                <lightning-button label="Previous" onclick={handlePrevious} disabled={isFirstPage}></lightning-button>
                <span class="slds-m-horizontal_small">Page {currentPage} of {totalPages}</span>
                <lightning-button label="Next" onclick={handleNext} disabled={isLastPage}></lightning-button>
            </div>
        </div>
    </lightning-card>
</template>

What’s happening here?

• We use <template for:each> to loop through and show only the visibleItems on the screen.
• Two buttons – Previous and Next – let us navigate through pages.
• We disable buttons when you’re on the first or last page to prevent errors.

paginationComponent.js

import { LightningElement, track } from 'lwc';

export default class PaginationComponent extends LightningElement {
    @track items = [];
    @track visibleItems = [];
    currentPage = 1;
    pageSize = 5;

    connectedCallback() {
        const Paragraphs = [
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
            "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
            "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
            "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            "Curabitur pretium tincidunt lacus. Nulla gravida orci a odio.",
            "Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris.",
            "Integer in mauris eu nibh euismod gravida.",
            "Phasellus fermentum in, dolor. Pellentesque facilisis.",
            "Morbi in sem quis dui placerat ornare.",

            "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
            "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
            "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
            "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            "Curabitur pretium tincidunt lacus. Nulla gravida orci a odio.",
            "Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris.",
            "Integer in mauris eu nibh euismod gravida.",
            "Phasellus fermentum in, dolor. Pellentesque facilisis.",
            "Morbi in sem quis dui placerat ornare."
        ];

        this.items = Paragraphs.map((text, index) => ({
            id: index + 1,
            text
        }));

        this.updateVisibleItems();
    }

    get totalPages() {
        return Math.ceil(this.items.length / this.pageSize);
    }

    get isFirstPage() {
        return this.currentPage === 1;
    }

    get isLastPage() {
        return this.currentPage === this.totalPages;
    }

    updateVisibleItems() {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = this.currentPage * this.pageSize;
        this.visibleItems = this.items.slice(start, end);
    }

    handleNext() {
        if (!this.isLastPage) {
            this.currentPage++;
            this.updateVisibleItems();
        }
    }

    handlePrevious() {
        if (!this.isFirstPage) {
            this.currentPage--;
            this.updateVisibleItems();
        }
    }
}

How pagination logic works here:

1. this.items – stores all paragraphs.
2. this.visibleItems – stores only items of current page.
3. currentPage – tracks current page number.
4. pageSize – number of paragrapghs per page (we use 5).
5. updateVisibleItems() – slices the full list to get only items for the current page.
6. handleNext() – goes to next page and updates visible items.
7. handlePrevious() – goes to previous page and updates visible items.

paginationComponent.js-meta.xml

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>63.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__AppPage</target>
		<target>lightning__HomePage</target>
		<target>lightning__RecordPage</target>
		<target>lightning__RecordAction</target>
	</targets>
</LightningComponentBundle>

This will make our component visilble in App Builder so you can drag it into any page.

Final Output

Once you deploy this component:

• We will see a clean layout with paragraphs.
• Only 5 paragraphs will appear per page.
• We can go back and forth using Previous/Next.

Conclusion

Pagination is a way to manage large data into smaller parts with good UI. In this blog, we learned:

• What pagination is and why it’s useful.
• How to implement it in LWC with simple logic.

Also checkout our playlist on LWC.

You can deepen your understanding of Data Cloud by exploring our comprehensive course on Salesforce Data Cloud and Agentforce – Building Agents and also check out our latest blogs on our websites for additional knowledge about salesforce.