Skip to main content
1 of 3
Ryan McNeely
  • 777
  • 2
  • 18
  • 34

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

With datatable, the 2nd object references 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 this 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":"4 BEST BUSINESS CORP","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;
        });
}
Ryan McNeely
  • 777
  • 2
  • 18
  • 34