Implement lazy loading on table using aura component

Question

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">
                <thead>
                    <tr>
                        <th data-record="Name"></th>
                        <th data-record="AccountNumber"></th>
                        <th data-record="Industry"></th>
                        <th data-record="Phone"></th> 
                    </tr>
                </thead> 
                    <tbody>
                        <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> 
                            </tr>
                        </aura:iteration>
                    </tbody> 
            </table> 
    </div>
    <!--Component End--> 
</aura:component>

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-->
</div>

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)
            dataToShow.push(nextSetOfData)
            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)
            }
        }
}