Know How To Display Parent Fields Value On A Standard Lightning Data Table

As we all know lightning data table has a limitation in directly displaying parent fields value related to the child object. However, we have a workaround in order to achieve the same. So in this article, we will see the workaround to overcome this limitation of the Lightning Data Table.

We have three workarounds to overcome Lightning Data Table Limitation which are as follows:

1. Using a Wrapper Class:

Apex code:

/**
* @Desc: A method to fetch details of parent record
**/
@AuraEnabled
public static map<String,Object> getParentDetails() {
    map<String,Object> mapData = new map<String,Object>();
    list<DataWrapper> listContact  = new list<DataWrapper>();
    for(Contact objContact : [Select Id, Account.Name,
                                     Account.Description,
                                     Name,firstName,lastname 
                              from Contact 
                              Where AccountId <> NULL limit 5]){
        if(objContact.Account.Description <> NULL){
            listContact.add(
                new DataWrapper(objContact.Account.Name,
                objContact.Name,
                objContact.Account.Description)
            );                        
        }                          
    }
    mapData.put('ParentDetails',JSON.serialize(listContact));
    return mapData;
}
//A wrapper class that will be use do display the data of the object
public class DataWrapper{
    @AuraEnabled public String strParentName {get;set;} 
    @AuraEnabled public String strChildName {get;set;} 
    @AuraEnabled public String strParentDesc {get;set;}
    public DataWrapper(String p_strParentName,
                       String p_strChildName,
                       String p_strParentDesc){
        this.strParentName =  p_strParentName;
        this.strChildName = p_strChildName;
        this.strParentDesc = p_strParentDesc;                   
    }
}

So here we use a wrapper class that collects the data of the fields that we need to display on the Lightning Component. Along with this we also need to set the column of the data table so that the variables of this wrapper are properly mapped with the Lightning Data Table Columns. which is shown in the below code.

Setting up columns to achieve mapping of data properly on the Lightning data table:

var columnslist =[
    {label: 'Parent AccountName',fieldName: 'strParentName',type:'text'},
    {label: 'Child Contact Name', fieldName: 'strChildName', type: 'text'},
    {label: 'Parent AccountDesc', fieldName: 'strParentDesc', type: 'text'}
]; 
component.set("v.listCol",columnslist);

As we can see in the code snippet the columnlist declared to have the fieldName attribute whose value must be the same as the variable that we are using in the Wrapper class in Apex Code in order to get the proper mapping of fields with the respective columns. Thus the final result appears as below. You can find the above code on github gist.

2. Handling it in Lightning Helper:

We can achieve the above result without using a wrapper with only making some changes in the Lightning Component Helper. We only need to make some modifications to the data that we are fetching from the apex code in order to map the fetched data with the respective columns. We need to make the changes as shown below:

var columnslist =[
    {label: 'Parent AccountName',fieldName: 'strParentName',type:'text'},
    {label: 'Child Contact Name', fieldName: 'strChildName', type: 'text'},
    {label: 'Parent AccountDesc', fieldName: 'strParentDesc', type: 'text'}
];

And once we fetched the data from the apex class we need to perform the following action on the data:

var fetchedData  = JSON.parse(responseData.ParentDetails);
fetchedData.forEach(function(temp,Index){
    temp.strParentName = temp.Account.Name;
    temp.strParentDesc = temp.Account.Description;
    temp.strChildName = temp.Name;
});
console.log(fetchedData);
component.set("v.listRecords",fetchedData);
component.set("v.listCol",columnslist);

You can find the entire code on github gist.

3. Using a formula field:

This is the simplest approach that requires the creation of additional formulas field on the child object which will be storing the required parent field values. And this field can be directly used in the Lightning Data Table without making use of wrapper in apex class or any modification of data in the Lightning Helper.