I'm trying to implement the lazy loading to the aura component and Accounts record maybe 10 or 100 or 500 and I do not have the ability to play with soql since this component sits as a child and the Account List is being passed.

Any pointers how should I do? so when the component loads I want to show only 50 records and as the user scroll down then load the another 50 from the accounts list

Here is the child component looks like.

<aura:component >
    <aura:attribute name="accounts" type="List"/>

    <!--Component Start-->
    <div class="slds-m-around_xx-large">
            <table class="slds-table">
                        <th data-record="Name"></th>
                        <th data-record="AccountNumber"></th>
                        <th data-record="Industry"></th>
                        <th data-record="Phone"></th> 
                        <aura:iteration items="{!v.accounts}" var="acc">
                            <tr class="slds-hint-parent"> 
                                <th data-label="Name"> {!acc.Name}  </th>
                                <td data-label="Account Number"> {!acc.AccountNumber </td>
                                <td data-label="Industry">{!acc.Industry}  </td>
                                <td data-label="Phone">{!acc.Phone}  </td> 
    <!--Component End--> 
  • I'm wondering about the javascript slice method should use that for lazy loading?
    – Nick
    Apr 19, 2022 at 20:05
  • are you looking for the infinite scroll? if yes, check if this article [Load data in row on scrolling] (developer.salesforce.com/forums/?id=9060G0000005U3aQAE) helps you. Apr 19, 2022 at 20:23
  • in the above example you are using the lightining datatable and if you look at my question, I'm using the table
    – Nick
    Apr 20, 2022 at 1:56

1 Answer 1


It is possible to create a lazy load logic when div is scrolled.

Fix the height of the div containing the table. Allow scroll on overflow. Use the onscroll event handler to provide custom logic to load next set of data.

Use accounts attribute to set all Account data. Use dataToShow attribute to show Account data. Initially only add 50 accounts from accounts to dataToShow.

<aura:attribute name="count" type="integer" default="50" /> //to maintain count
<aura:attribute name="allAccountsLoaded" type="boolean" default="false" /> //to check if all account data is loaded
<aura:attribute name="dataToShow" type="List" default="false" /> //to show data in table

<div style="height: 300px;overflow-x: scroll;" onscroll="{!c.handleScroll}">
<!--insert table here-->

In JavaScript use the scroll event handler:

handleScroll(event , component){
        var scrollTop = event.target.scrollTop
        var scrollHeight = event.target.scrollHeight
        var clientHeight = event.target.clientHeight
        var count = component.get("v.count")
        var allAccounts = component.get("v.accounts")
        var allAccountsLoaded = component.get("v.allAccountsLoaded")
        var dataToShow = component.get("v.dataToShow")

        //console.log('scrollTop: ',scrollTop)
        //console.log('scrollHeight: ',scrollHeight)
        //console.log('clientHeight: ',clientHeight)
        if(((scrollHeight - clientHeight) <= (scrollTop + 10)) && !allAccountsLoaded){
            //load next set of 50 records
            var nextSetOfData = allAccounts.splice(count , 50)
            component.set("v.dataToShow", dataToShow)
            //logic to check if all data has been loaded
            if(dataToShow.length === allAccounts.length){
                allAccountsLoaded = true;
                component.set("v.allAccountsLoaded", allAccountsLoaded)

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .