LWC - lighting-datatable - how to display Vendor_Name__r.Name in Vendor column [duplicate]

Question

With datatable, the 2nd object references (Vendor_Name__r.Name and Purchase_Agreement__r.Name) here weren't displaying in the view. The entire column was blank.

 @track columns = [
        {label: 'Vendor', fieldName: 'Vendor_Name__r.Name', sortable: true},
        {label: 'Quote Name', fieldName: 'Name', sortable: true},
        {label: 'Status', fieldName: 'Status__c', sortable: true},
        {label: 'Purchase Agreement', fieldName: 'Purchase_Agreement__r.Name', sortable: true}
    ];

When I change Vendor_Name__r.Name TO Vendor_Name__c AND Purchase_Agreement__r.Name to Purchase_Agreement__c, the Ids render in the view just fine.

@track columns = [
        {label: 'Vendor', fieldName: 'Vendor_Name__r.Name', sortable: true},
        {label: 'Quote Name', fieldName: 'Name', sortable: true},
        {label: 'Status', fieldName: 'Status__c', sortable: true},
        {label: 'Purchase Agreement', fieldName: 'Purchase_Agreement__r.Name', sortable: true}
    ];

As a workaround, I figured the following would work, but all rows in my datatable are now blank. In the console, it does print this out:

***** quote: {"Vendor_Name__c":"0013k00002io4VgAAI","Name":"0029","Status__c":"Ready for Review","Purchase_Agreement__c":"a4vDL0000013VfjYAE","Id":"a4cDL000000hddsYAA","Vendor_Name__r":{"Name":"Acme1","Id":"0013k00002io4VgAAI"},"Purchase_Agreement__r":{"Name":"PA# 0001","Id":"a4vDL0000013VfjYAE"}}

HTML

<template if:true={quoteList}>
    <lightning-datatable 
        data={quoteList} 
        columns={columns} 
        key-field="Id"            
        default-sort-direction={defaultSortDirection}
        sorted-direction={sortDirection}
        sorted-by={sortedBy}
        onsort={handleSort}>
    </lightning-datatable>
</template>

JS

    @track columns = [
        {label: 'Vendor', fieldName: 'VendorName', sortable: true},
        {label: 'Status', fieldName: 'Status', sortable: true},
        {label: 'Quote Name', fieldName: 'QuoteName', sortable: true},
        {label: 'Purchase Agreement', fieldName: 'PurchaseAgreementName', sortable: true}
    ];


    connectedCallback() {
        getQuotes({rfqID : this.recordId, statusValue : this.filterValue})
        .then(results => {
            // this.quoteList = results;
            
            results.forEach(result => {
                console.log('**** VendorName: '+result.Vendor_Name__r.Name);
                this.quoteList.push({
                    VendorName: result.Vendor_Name__r.Name,
                    Status: result.Status__c,
                    QuoteName: result.Name,
                    PurchaseAgreementName: result.Purchase_Agreement__r.Name
                });
            })

            this.quoteList.forEach(
                quote => console.log('***** quote: ' + JSON.stringify(quote))
            );


            this.error = undefined;
        })
        .catch(error => {
            this.error = error;
            this.queryResults = undefined;
        });
}

Answer 1

What you need to understand here is that the data table component only picks up data from the object in your array. Technically speaking, the relationship data is there, but is not part of the object, it is an attribute of a nested object, hence why it can't access it.

The quickest approach you can take here - from my experience - is to iterate the list before assigning the data to the attribute used by the data table component, properly formatting the value of the field. You'll probably need some recursive function that is able to gather data from multiple levels of nesting.

Instead of doing this:

apexMethod().then((res) => {
    this.valueOfTheDataTable = res;
})

It would look something like this:

apexMethod().then((res) => {
    // process the data before assigning to the component's variable below
    res.forEach(row => {
        row.vendorName = getFieldValue(row, "Vendor_Name__r.Name");
    });

    this.valueOfTheDataTable = res;
})

And of course, in your column definition for the data table, you would use vendorName, the value that the forEach function processed, instead of the lookup path in the Salesforce hierarchy, Vendor_Name__r.Name.