July 27, 2018

Infinite Loading in lightning:datatable

Sample Code:

Component:

<aura:component implements="force:appHostable"
    controller="AccountListController">
                
    <aura:attribute type="Account[]" name="acctList"/>
    <aura:attribute name="mycolumns" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    
    <lightning:datatable data="{! v.acctList }" 
                         columns="{! v.mycolumns }" 
                         keyField="id"
                         hideCheckboxColumn="true"
                         enableInfiniteLoading="true"
                         onloadmore="{! c.loadMoreData }"/>
    
</aura:component>

Controller:

({
    
    init : function(component, event, helper) {
        
        component.set('v.mycolumns', [
            {label: 'Account Name', fieldName: 'linkName', type: 'url', 
            typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}},
            {label: 'Industry', fieldName: 'Industry', type: 'text'},
            {label: 'Type', fieldName: 'Type', type: 'Text'}
        ]);
        
        helper.fetchAccounts(component, event, 0);
        
    },
    loadMoreData : function(component, event, helper) {
        
        event.getSource().set("v.isLoading", true);        
        component.set('v.loadMoreStatus', 'Loading');
        helper.fetchAccounts(component, event, component.get('v.acctList').length);
        
    }

})

Helper:

({
    
fetchAccounts : function(component, event, offSetCount) {

        var action = component.get("c.fetchAccts");
        action.setParams({
            
            "intOffSet" : offSetCount
            
        });
        
        action.setCallback(this, function(response) {
            
            var state = response.getState();
            if (state === "SUCCESS") {
                var records = response.getReturnValue();
                records.forEach(function(record){
                    record.linkName = '/'+record.Id;
                });
                var currentData = component.get('v.acctList');                
                component.set("v.acctList", currentData.concat(records));
            }
        event.getSource().set("v.isLoading", false);
            
        });
        
        $A.enqueueAction(action);
        
}
    
})

Apex Class:

public class AccountListController {
    
    @AuraEnabled
    public static List < Account > fetchAccts(Integer intOffSet) {
        
        return [ SELECT Id, Name, Industry, Type FROM Account LIMIT 5 OFFSET : Integer.valueOf(intOffSet) ];
        
    }
    
}

Output:


5 comments:

  1. what does this line means : records.forEach(function(record){
    record.linkName = '/'+record.Id;
    });

    ReplyDelete
  2. Since, we are using offset, will it work if records are more than 2000?

    ReplyDelete
    Replies
    1. The maximum offset is 2,000 rows. Requesting an offset greater than 2,000 results in a NUMBER_OUTSIDE_VALID_RANGE error.

      Delete