Implement Lazy Loading in Lightning Datatable

In this article we are going to understand and implement lazy loading used in lightning component to fetch the records from database on demand rather than loading all data at a time.

To reduce or delay expensive calculations or data loading, use lazy loading, a technique in which a page loads its essential features first and delays the rest—either briefly or until the user performs an action that requires the information. This technique gives users faster access to essential features, improving the apparent responsiveness of a large page, even though the entire page takes the same total time to load.

Scenario: We will create a lightning data table which shows list of opportunities, here showing 10 records and when user scrolls down the table it loads more records along with previously fetched records.

Step 1: Create Apex Class LazyOppotunitiesController.apxc

public class LazyOppotunitiesController {
    
    @AuraEnabled
    public Static list<Opportunity> getOpportunity(Integer Limits){ 
        return [Select id, Name, StageName, CloseDate,Account.Name, Amount From Opportunity LIMIT :Integer.valueof(Limits)]; 
    }
    @AuraEnabled
    public static Integer totalOpportunitySize(){
        AggregateResult results = [SELECT Count(Id) TotalOpportunity From Opportunity];
        Integer totalOpportunity = (Integer)results.get('TotalOpportunity');
        return totalOpportunity;
        } 
}

Step2: Create lightning component

LazyOppotunitiesComponent.cmp

<aura:component controller ="LazyOppotunitiesController" implements="force:appHostable,flexipage:availableForAllPageTypes,
flexipage:availableForRecordHome,force:hasRecordId" access="global" >
	
 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

 <aura:attribute name="columns" type="List" />
 <aura:attribute name="Opplist" type="object" />
 <aura:attribute name="initRows" type="Integer" default="10"/>
 <aura:attribute name="Count" type="Integer" default="10"/>
 <aura:attribute name="totalResultsData" type="Integer" default="0"/>
    
 <div class="slds-m-around_xx-small" style="height: 300px">
 <lightning:datatable columns="{!v.columns}"
                      data="{!v.Opplist}"
                      keyField="Id"
                      showRowNumberColumn="true"
                      rowNumberOffset="0"
                      enableInfiniteLoading="true"
                      loadMoreOffset="{!v.loadMoreOffset}"
                      onloadmore="{!c.LoadMore}"
                      hideCheckboxColumn="true"/>
 </div>
</aura:component>

LazyOppotunitiesComponentController.js

({
    doInit : function(component, event, helper) {
        component.set('v.columns', [
            {label: 'Opportunity name', fieldName: 'Name'},
            {label: 'Account name', fieldName: 'AccountName'},
            {label: 'Close date', fieldName: 'CloseDate', type: 'date'},
            {label: 'Amount', fieldName: 'Amount', type: 'text'},
            {label: 'Stage', fieldName: 'StageName', type: 'text'}
        ]);
        helper.totalopportunity(component,helper);               
    },
    LoadMore:function (component, event, helper) {
        event.getSource().set("v.isLoading", true);
        var nextlimit=component.get("v.initRows")+component.get("v.Count");
		component.set("v.initRows",nextlimit)
        var action = component.get("c.getOpportunity");
        action.setParams({
            "Limits": component.get("v.initRows"),
        });
        action.setCallback(this, function(response) {     
            var state = response.getState();       
            if (state === "SUCCESS" ) {
                var Opplist = response.getReturnValue();
        		event.getSource().set("v.isLoading", false);
                component.set('v.Opplist',Opplist);  
                for (var i = 0; i < Opplist.length; i++) {
                var row = Opplist[i];
                if (row.Account) row.AccountName = row.Account.Name;
            	}
                component.set('v.Opplist', Opplist);
            }
        });
        if(component.get("v.initRows")<=component.get('v.totalResultsData'))
        {
           $A.enqueueAction(action);   
        }
        else{
            if(component.get('v.initRows')-component.get("v.totalResultsData")<component.get("v.Count")){
                 $A.enqueueAction(action);   
            }else{
                  event.getSource().set("v.isLoading", false);
            }
        }
    },

})

LazyOppotunitiesComponentHelper.cmp

  ({
    getOpportunityList : function(component,helper) {
        var action = component.get("c.getOpportunity")
        action.setParams({
            "Limits": component.get("v.initRows")});
        action.setCallback(this, function(response) {          
           var state = response.getState();
            if (state === "SUCCESS" ) {
                var showToast = $A.get("e.force:showToast");
               showToast.setParams({
                    'title' : 'Load',
                    'message' : 'Opportunity Loaded Successfully.',
                   	'type': 'Success'
                });
                showToast.fire();
                var Opplist = response.getReturnValue();
                component.set("v.Opplist",Opplist);
                for (var i = 0; i < Opplist.length; i++) {
                var row = Opplist[i];
                if (row.Account) row.AccountName = row.Account.Name;
            	}
                component.set('v.Opplist', Opplist);
                
			}
        });
        $A.enqueueAction(action);

    },
   
   totalopportunity : function(component,helper) {
        var action = component.get("c.totalOpportunitySize");
       action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS" ) {
                var resultData = response.getReturnValue();
                component.set("v.totalResultsData",resultData);
            }
        });
        $A.enqueueAction(action);
       this.getOpportunityList(component,helper);
    },
})

Step3: Output of the above code

Thanks for reading..!!