+ Start a Discussion
.12.12 

How to show message when data is empty in lightning datatable

I want to show a data in table form if data was there and a message if there is no data for this account 

 

public class AccountController{
    @AuraEnabled
    public static List <Account> fetchAccounts(record Id) {
        //Qyery 10 accounts
        List<Account> accList = [SELECT Id, Name, BillingState, 
                                    Website, Phone, Industry, Type from Account where Name=:redId];
        //return list of accounts
        return accList;
    }
}


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

({
    fetchAcc : function(component, event, helper) {
        helper.fetchAccHelper(component, event, helper);
    }
})

({
    fetchAccHelper : function(component, event, helper) {
        component.set('v.mycolumns', [
            {label: 'Account Name', fieldName: 'Name', type: 'text'},
                {label: 'Industry', fieldName: 'Industry', type: 'text'},
                {label: 'Phone', fieldName: 'Phone', type: 'Phone'},
                {label: 'Website', fieldName: 'Website', type: 'url '}
            ]);
        var action = component.get("c.fetchAccounts");
        action.setParams({
          recId: component.get("v.recordId")
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.acctList", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    }
})
 

AbhinavAbhinav (Salesforce Developers) 
Check this:

You'll need to have a variable called "empty" that holds whether there's data or not.
 
<lightning-datatable
    class="some-table"
    key-field="Id"
    data={data}
    columns={columnMappping}
    hide-checkbox-column
>
</lightning-datatable>
<template if:true={empty}>
    No data to display
</template>

refernce:

https://salesforce.stackexchange.com/questions/339899/can-we-display-message-when-lightning-data-table-is-empty-in-lwc

If it helps mark it as best answer.

Thanks!
Patrick Larson 15Patrick Larson 15
They are not using LWC datatable, so <template> is not allowed.