3

I have created a lightning component which has a lightning:datatable that loads more data as I scroll down. The data loads fine when I use the component explicitly in an app. In the below picture there is 109 rows in the table.

enter image description here

However, When I use the component in a flexipage and as I scroll down, no infinite loading happens and no extra data is loaded. In the init handler, there are 9 records and in loadMoreData function, there is 10 record. The loadMoreData function is called when I refresh the page. So, altogether only 19 records are shown.

enter image description here

Below is my component code:

<aura:attribute name="loadMoreOffset" type="Integer" default="5"/>
<aura:attribute name="totalNumberOfRows" type="Integer" default="300"/>
<aura:attribute name="loadMoreStatus" type="String" default=""/>
<aura:attribute name="enableInfiniteLoading" type="Boolean" default="true"/>

<aura:handler name="init" value="{! this }" action="{! c.init }"/>
<div style="height: 300px; width:100%;" class="slds-scrollable--y">
    <lightning:datatable
                         columns="{! v.columns }"
                         data="{! v.data }"
                         keyField="{! v.keyField }"
                         showRowNumberColumn="true"
                         enableInfiniteLoading="{! v.enableInfiniteLoading }"
                         loadMoreOffset = "{!v.loadMoreOffset}"
                         onloadmore="{! c.loadMoreData }"
                         />

</div>

My Controller Code:

({
     init: function (cmp, event, helper) {
        cmp.set('v.columns', [
            {label: 'Opportunity name', fieldName: 'opportunityName', type: 'text'},
            {label: 'Account name', fieldName: 'accountName', type: 'text'},
            {label: 'Close date', fieldName: 'closeDate', type: 'text'},
            {label: 'Confidence', fieldName: 'confidence', type: 'text'}
        ]);

        var data = [
            {opportunityName:"Name1",accountName:"Account1",closeDate:"CloseDate",confidence:"Confidence"},
            {opportunityName:"Name1",accountName:"Account1",closeDate:"CloseDate",confidence:"Confidence"},
            {opportunityName:"Name1",accountName:"Account1",closeDate:"CloseDate",confidence:"Confidence"},
            {opportunityName:"Name1",accountName:"Account1",closeDate:"CloseDate",confidence:"Confidence"},
            {opportunityName:"Name1",accountName:"Account1",closeDate:"CloseDate",confidence:"Confidence"},
            {opportunityName:"Name1",accountName:"Account1",closeDate:"CloseDate",confidence:"Confidence"},
            {opportunityName:"Name1",accountName:"Account1",closeDate:"CloseDate",confidence:"Confidence"},
            {opportunityName:"Name1",accountName:"Account1",closeDate:"CloseDate",confidence:"Confidence"},
            {opportunityName:"Name1",accountName:"Account1",closeDate:"CloseDate",confidence:"Confidence"}
                   ];

        cmp.set("v.data", data);
    },
    loadMoreData:function(cmp,event, helper) {
        console.log('OK');
        if(cmp.get('v.data').length >= 100) {
            cmp.set('v.enableInfiniteLoading', false);
        } else {
            cmp.set('v.enableInfiniteLoading', true);
             var data2 = [ {opportunityName:"AddedAnother",accountName:"Account1",closeDate:"CloseDate",confidence:"Confidence"},
            {opportunityName:"Name1",accountName:"Account1",closeDate:"CloseDate",confidence:"Confidence"},
            {opportunityName:"Name1",accountName:"Account1",closeDate:"CloseDate",confidence:"Confidence"},
            {opportunityName:"Name1",accountName:"Account1",closeDate:"CloseDate",confidence:"Confidence"},
            {opportunityName:"Name1",accountName:"Account1",closeDate:"CloseDate",confidence:"Confidence"},
            {opportunityName:"Name1",accountName:"Account1",closeDate:"CloseDate",confidence:"Confidence"},
            {opportunityName:"Name1",accountName:"Account1",closeDate:"CloseDate",confidence:"Confidence"},
            {opportunityName:"Name1",accountName:"Account1",closeDate:"CloseDate",confidence:"Confidence"},
            {opportunityName:"Name1",accountName:"Account1",closeDate:"CloseDate",confidence:"Confidence"},
            {opportunityName:"Name1",accountName:"Account1",closeDate:"CloseDate",confidence:"Confidence"}];

            var currentData = cmp.get('v.data');
            var newData = currentData.concat(data2);
            cmp.set('v.data', newData);
        }
    }
})

Is there any reason on why I am not able to infinitely load new records when i scroll down in the flexipage?

  • What did you set as keyField attribute? and did you have it in your data? – Nithesh N Jan 23 '19 at 23:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.