+ Start a Discussion
Sachin Bhalerao 17Sachin Bhalerao 17 

Error on component load

User-added imageDear Team ,

I implented Lightning data table with sortable columns but on load m getting this error . Please let me know some solution in order i will remove this error .

Thanks & Regards
Sachin Bhalerao
Devi ChandrikaDevi Chandrika (Salesforce Developers) 
Hi sachin,
Can you please post your code here
Sachin Bhalerao 17Sachin Bhalerao 17
Apex class:
public class SortableAccountTableController {
   // wrapper class 
    public class AccountWrapper{
        @AuraEnabled
        public String message;
        @AuraEnabled
        public List<Account> accountsList;
        @AuraEnabled
        public Boolean success;
    }
    
    //Return account records and message to be displayed in toast
    @AuraEnabled
    public static AccountWrapper getAccounts(){
        AccountWrapper accountWrapper = new AccountWrapper();
        try{
            accountWrapper.accountsList = [SELECT ID,Name,AccountSource,Rating,NumberOfEmployees
                                           FROM Account
                                           ORDER BY AnnualRevenue 
                                           DESC NULLS LAST 
                                           LIMIT 50];
            accountWrapper.message = 'Account records are retrieved ';
            accountWrapper.success = true;
        }
        catch(Exception e){
            accountWrapper.message = e.getMessage();
            accountWrapper.success = false;
        }
        return accountWrapper;
    }
}

component

<aura:component controller="SortableAccountTableController"
                description="Account table with column sorting example"
                implements="flexiPage:availableForAllPageTypes">
    
    <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
   <!--aura attributes--> 
    <aura:attribute name="accountColumns" type="List"/>
    <aura:attribute name="accountData" type="Object"/>
    <aura:attribute name="sortBy" type="String"/>
    <aura:attribute name="sortDirection" type="String"/>
    
    <!--Page header-->
    <div class="slds-page-header" role="banner">
        <span class="slds-text-heading_medium">Accounts List</span>
        <span class="slds-page-header__title">Top 50 Accounts</span>
    </div>
    
    <!--Lightning data table markup-->
    <lightning:datatable aura:id="accountTable"
                         keyField="Id"
                         hideCheckboxColumn="true"
                         columns="{!v.accountColumns}"
                         data="{!v.accountData}"
                         sortedBy="{!v.sortBy}"
                         sortedDirection="{!v.sortDirection}"
                         onsort="{!c.handleSort}"/>
    
</aura:component>

controller:

({
    onInit : function(component,event,helper){
        // Setting column information.To make a column sortable,set sortable as true on component load
        component.set("v.accountColumns",[
            {
                label : 'Name',
                fieldName : 'Name',
                type : 'text',
                sortable : true
            },
            {
                label : 'Account Source',
                fieldName : 'AccountSource',
                type : 'text',
                sortable : true
            },
            {
                label : 'Rating',
                fieldName : 'Rating',
                type : 'text',
                sortable : true
            },
            {
                label : 'Employees',
                fieldName : 'NumberOfEmployees',
                type : 'number',
                sortable : true
            }
        ]);
        // call helper function to fetch account data from apex
        helper.getAccountData(component);
    },
    
    //Method gets called by onsort action,
    handleSort : function(component,event,helper){
        //Returns the field which has to be sorted
        var sortBy = event.getParam("fieldName");
        //returns the direction of sorting like asc or desc
        var sortDirection = event.getParam("sortDirection");
        //Set the sortBy and SortDirection attributes
        component.set("v.sortBy",sortBy);
        component.set("v.sortDirection",sortDirection);
        // call sortData helper function
        helper.sortData(component,sortBy,sortDirection);
    }
})

Helper:

({
    getAccountData : function(component){
        //Load the Account data from apex
        var action = component.get("c.getAccounts");
        var toastReference = $A.get("e.force:showToast");
        action.setCallback(this,function(response){
            var state = response.getState();
            if(state == "SUCCESS"){
                var accountWrapper = response.getReturnValue();
                if(accountWrapper.success){
                    //Setting data to be displayed in table
                    component.set("v.accountData",accountWrapper.accountsList);
                    toastReference.setParams({
                        "type" : "Success",
                        "title" : "Success",
                        "message" : accountWrapper.message,
                        "mode" : "dismissible"
                    });
                } // handel server side erroes, display error msg from response 
                else{
                    toastReference.setParams({
                        "type" : "Error",
                        "title" : "Error",
                        "message" : accountWrapper.message,
                        "mode" : "sticky"
                    }); 
                }
            } // handel callback error 
            else{
                toastReference.setParams({
                    "type" : "Error",
                    "title" : "Error",
                    "message" : 'An error occurred during initialization '+state,
                    "mode" : "sticky"
                });
            }
            toastReference.fire();
        });
        $A.enqueueAction(action);
    },
    
    sortData : function(component,fieldName,sortDirection){
        var data = component.get("v.accountData");
        //function to return the value stored in the field
        var key = function(a) { return a[fieldName]; }
        var reverse = sortDirection == 'asc' ? 1: -1;
        
        // to handel number/currency type fields 
        if(fieldName == 'NumberOfEmployees'){ 
            data.sort(function(a,b){
                var a = key(a) ? key(a) : '';
                var b = key(b) ? key(b) : '';
                return reverse * ((a>b) - (b>a));
            }); 
        }
        else{// to handel text type fields 
            data.sort(function(a,b){ 
                var a = key(a) ? key(a).toLowerCase() : '';//To handle null values , uppercase records during sorting
                var b = key(b) ? key(b).toLowerCase() : '';
                return reverse * ((a>b) - (b>a));
            });    
        }
        //set sorted data to accountData attribute
        component.set("v.accountData",data);
    }
})

App

<aura:application extends="force:slds">
    <c:sortableAccountTable/>
</aura:application>
Hi Chandrika,

Plz have a look on above code .

Thanks & Regards
Sachin
 
Devi ChandrikaDevi Chandrika (Salesforce Developers) 
Hi sachin,
Toast event wont work in lighning app.It’s supported in Lightning Experience, Salesforce app, and Lightning communities.I tried this one in my org it is working for me in record page

Please refer below link
https://developer.salesforce.com/docs/component-library/bundle/force:showToast/documentation


Hope this helps you
If this helps kindly mark it as solved so that it may help others in future.

Thanks and Regards