0

I have a lightning:datatable which I need to load data when the user scrolls. I found the onloadmore event is fired when the user clicks on a table row and not when the user scrolls on the table.

Even more, as soon as onloadmore is triggered, it keeps calling until loading all the records in the database.

Can someone help me to understand why is doing this and a workaround? Any help would be greatly appreciated.

To check how is called loadMoreData function open a inspector and check the console after clicking on a row.

Here is an example:

testDataTable.cmp

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="ContactController">
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    
    <aura:attribute name="rowsToLoad" type="Integer" default="10"/>
    <aura:attribute name="enableInfiniteLoading" type="Boolean" default="false"/>
    <aura:attribute name="loadMoreOffset" type="Integer" default="5"/>
    <aura:attribute name="loadMoreStatus" type="String" default=""/>
    
    <!-- handlers-->
    <aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
    
    <lightning:card title="testDataTableCard">
        <lightning:datatable
          keyField="Id"
          data="{! v.data }"
          columns="{! v.columns }"
          enableInfiniteLoading="{! v.enableInfiniteLoading }"
          onloadmore="{! c.loadMoreData }"/>
    </lightning:card>
</aura:component>

testDataTableController.js

({
 doInit : function(component, event, helper) {
  component.set('v.columns', [
            {label: 'Id', fieldName: 'Id', type: 'text'},
         {label: 'LastName', fieldName: 'LastName', type: 'text'}
        ]);
        
        helper.loadContacts(component, event, helper);
 },
    
    loadMoreData: function(component, event, helper) {
        console.log('loadMoreData called');
    }
})

testDataTableHelper.js

({
  loadContacts : function(component, event, helper) {
    var action = component.get("c.getContacts");
    action.setStorable();
    action.setCallback(this,function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            var records = response.getReturnValue();
            component.set("v.data", records);
            component.set("v.enableInfiniteLoading", true);
        } else {
            console.log('ERROR');
        }
    });
    $A.enqueueAction(action);
  }
})

ContactController.class

public class ContactController {
  @AuraEnabled
  public static List<Contact> getContacts() {
      return[Select Id, LastName From Contact Limit 10];
  }
}

Lightning component library: lightning:datatable infinite loading

Lorenzo Fernandez
  • 1
  • 3

2 Answers2

1

I had a similar issue with my DataTable when I had only a few records to show, maybe this helps you too.

When I'd set the isLoading attribute of the DataTable element, it would show the spinner somewhere within all of the divs DataTable creates. But the height of the spinner was bigger than the height of the datatable element used in internal calculation whether to trigger the loadMore callback function, so it trips it off again and again...

The way it stopped the infinite loop for me was to keep the isLoading on false at all times. You can implement your own spinner as an overlay over the whole table which won't initiate height recalculation.

Again, this solution is specific to when the table shows only a few elements, so the spinner image is larger than the table. If you use a modal window or some other container, try setting the height explicitly as suggested by Andrii:

<div style="height:500px">
    <lightning:datatable
        data="{!v.data}"
        ...
        />
</div>

You can find the supported attributes list here

sskular
  • 240
  • 2
  • 5
0

For fixing infinity onloadmore, you should wrapp your datatable into div with fixed absolute height.

Andrii Leshchuk
  • 1