function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
abu saleh khan 8abu saleh khan 8 

1. Show parent data in lightning datatable

Hi all,

I have a requirement in which I need to show parent field in lightning:datatable column. I'm trying to display Account Name in Contact datable, but it seems parent fields are not supported in lightning datatable. 

I am able to show Contact details in a table but the problem occurs when I get data from a parent record. I want the Account name of my contact.

Is there any way to show parent record data with this component?

Thanks.
 
Best Answer chosen by abu saleh khan 8
Khan AnasKhan Anas (Salesforce Developers) 
Hi Abu,

Greetings to you!

If you want to display parent's information in dataTable then there is no way to access data like foo.bar.baz. You have to flatten their data(server side or client side).

Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

Apex: 
public class DataTableRelatedC {
    
    @AuraEnabled
    public static List<Contact> getContacts() {
        List<Contact> conList=new List<Contact>();
        conList=[SELECT FirstName, LastName, Account.Name, Phone FROM Contact LIMIT 20];
        return conList;
    }
}

Component: 
<aura:component controller="DataTableRelatedC"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <!-- Three important parts of datatable is Key , data and columns
         so we need attribute for data and columns(metatadata)-->
    <!-- attributes -->
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List[]"/>
    
    
    <!-- handlers-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    
    <!-- the container element determine the height of the datatable -->
    <div style="height: 300px">
        
        <lightning:datatable aura:id="opportunitydatatable"
                             
                             keyField="Id"
                             data="{!v.data}"
                             columns="{!v.columns}"/>
        
    </div>
</aura:component>

Controller: 
({
    doInit : function(component, event, helper) {
        component.set('v.columns', [
            {label: 'First Name', fieldName: 'FirstName', editable: true, type: 'text'},
            {label: 'Last Name', fieldName: 'LastName', editable: true, type: 'text'},
            {label: 'Account Name', fieldName: 'AccountName', type: 'text'},
            {label: 'Phone', fieldName: 'StageName', editable: true, type: 'text'}
        ]);
        var action=component.get('c.getContacts');
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var rows = response.getReturnValue();
                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];
                    if (row.Account) row.AccountName = row.Account.Name;
                }
                component.set("v.data", rows);
                
            }
        });
        $A.enqueueAction(action);
    }
})

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas