Infinite Loading in Data Table in Salesforce LWC

In this Salesforce tutorial, we will learn to implement infinite loading in the Salesforce LWC data table. The infinite loading of data in an LWC component is also termed lazy loading, and it loads data only when it becomes visible to the user as they scroll down the page, instead of loading everything at once when the page initially loads.

Infinite Loading in Salesforce Lightning Web Component

Infinite loading is used in Salesforce Lightning Web Components (LWC) to fetch and display more data dynamically as the user scrolls down. It is implemented in list views, data tables, or feeds to improve performance by loading data in parts instead of all at once.

Infinite loading in LWC initially loads a fixed number of records when the component is first rendered. As the user scrolls through the list, the component detects when they reach the bottom. At this point, it fetches the next set of records and appends them to the existing list, and it continues until all available data is loaded.

Implement Infinite Loading in the Salesforce LWC data table

In the example below, we will implement infinite loading in the LWC data table, where we will use the enable-infinite-loading and load-more-offset attributes of the Lightning Datatable.

The enable-infinite-loading attribute allows loading a subset of data initially and fetching more as users scroll to the end of the table. It is used along with the onloadmore event handler to retrieve additional data dynamically.

The load-more-offset attribute determines when infinite loading is triggered based on the table’s scroll position in the data table.

Now, follow the steps below to create an LWC data table with infinite or lazy loading.

1. First, we will create an Apex controller class using the offset method that will fetch the Opportunity records.

public with sharing class InfiniteLoadingController {
    @AuraEnabled(cacheable=true)
    public static List<Opportunity> getOpportunities(Integer limitSize, Integer offset){
        return [SELECT Id, Name, StageName, CloseDate
                FROM Opportunity
                ORDER BY CreatedDate
                LIMIT :limitSize
                OFFSET :offset];
    }
}

2. Create a lightning web component and enter the code below in the HTML file.

<template>
    <lightning-card title="Lazy loading DataTable">
    <div style="height:500px">
        <lightning-datatable key-field="Id"
                data={opportunities}
                columns={columns}
                enable-infinite-loading
                onloadmore={loadMoreData}
                hide-checkbox-column="true"
                show-row-number-column="true">
        </lightning-datatable> 
    </div>
</lightning-card>
</template>

3. After this, enter the code below in the LWC component’s JS file. This code will handle the logic of infinite loading of records in the data table.

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

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

export default class LazyLoadingLWCDemo extends LightningElement {
    opportunities = [];