Add Related Fields Columns in Salesforce LWC Data Table

In Salesforce, we have objects with related lists displayed on the record page of each record. The related lists show a list of records linked to the current record through a lookup or master-detail relationship, to view related information without leaving the current record page.

When it comes to the related field column in the LWC data table, we fetch the data of the object’s related fields and display them in the object data table along with other fields.

In this Salesforce tutorial, we will learn how to add related field columns to the Salesforce LWC data table.

Table of Contents

Add Related Fields Columns in LWC Data Table

To add related fields as a column in the LWC datatable, we need the fields from a parent or lookup object. For example, displaying the accounts related to contact records on the data table.

To fetch the Account name, we can refer to it in the SOQL query as Account.Name, but the LWC lightning data table does not support dot notation fields and does not render them in the data table.

To display the related list columns in the LWC data table, we need to format them using the flatten transformation feature.

In the example below, we will display the contact records along with the related list columns Account name and the Owner Name.

First, define a controller class to fetch the contact records and the related list fields Account name and Owner name (contact owner).

public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getRelatedContacts() {
        return [SELECT Id, Name, Account.Name, Owner.Name 
        FROM Contact 
        LIMIT 10];
    }
}

Now, create an LWC component and enter the code below in the HTML template to render data in an LWC data table.

<template>
    <lightning-card title="Contacts with related fields"></lightning-card>
    <lightning-datatable
        key-field="Id"
        data={data}
        columns={columns}
        hide-checkbox-column="true"
    ></lightning-datatable>
</template>

We transformed the data using the code below in the JS file to format the related lists column for display in the LWC data table.

import { LightningElement, wire } from 'lwc';
import getRecords from '@salesforce/apex/ContactController.getRelatedContacts';

export default class RelatedListDataTable extends LightningElement {
    
    columns = [
        { label: 'Record Name', fieldName: 'Name', type: 'text' },
        { label: 'Account Name', fieldName: 'AccountName', type: 'text' },
        { label: 'Owner Name', fieldName: 'OwnerName', type: 'text' }
    ];

    data = []; 
    @wire(getRecords)
    wiredRecords({ error, data }) {
        if (data) {
            this.data = data.map(record => ({
                Id: record.Id,
                Name: record.Name,
                AccountName: record.Account ? record.Account.Name : '', 
                OwnerName: record.Owner ? record.Owner.Name : ''
            }));
        } else if (error) {
            console.error('Error fetching records:', error);
        }
    }
}

In the above method, we have used the @wire decorator to link the fetched records to the wiredRecords function, which processes the data. If data is returned, it maps each record into an object with Id, Name, AccountName, and OwnerName, storing it in this.data.

For example, mapped AccountName in the table from the fetched value Account.Name using AccountName: record.Account ? record.Account.Name.

Make the component visible to the Lightning pages using the code below in the meta.xml file inside the <LightningComponentBundle> tag

<isExposed>true</isExposed>

    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

After this, deploy the LWC component to the Lightning page. To deploy the component, navigate to the lightning page > settings > Edit page.

In the Lightning App Builder, add the component to the page region and save the changes.

Now you will see the data table with the contact record name, their related account, and related user(owner) names in the table columns.

Related Fields Columns in Salesforce LWC Data Table

This way, we can add the related fields columns to the Salesforce LWC Lightning data table by following the above steps.

Create Related Fields LWC Data Table for Record Page

To create a related fields LWC data table, let’s take an example, where we have to display related contact records on the account record page, and display those contact records in a custom LWC data table.

This LWC data table will display the contacts related to that specific account record.

Create a controller class to fetch the contacts related to the specific account using the account ID.

public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getRelatedContacts(String accountId) {
        return [SELECT Id, FirstName, LastName, Email, Phone 
                FROM Contact 
                WHERE AccountId = :accountId 
                LIMIT 10];
    }
}

Now, create an LWC component and enter the code below in the HTML file to render the data in an LWC table.

<template>
    <lightning-card title="Related Contacts">
        <div class="slds-m-around_medium">
            <template if:true={contacts}>
                <lightning-datatable
                    key-field="Id"
                    data={contacts}
                    columns={columns}
                    hide-checkbox-column="true">
                </lightning-datatable>
            </template>
        </div>
    </lightning-card>
</template>

After this, enter the code below in the JS file defining the logic to map the related list field along the object field columns.

import { LightningElement, api, wire } from 'lwc';
import getRelatedContacts from '@salesforce/apex/ContactController.getRelatedContacts';

const COLUMNS = [
    { label: 'First Name', fieldName: 'FirstName', type: 'text' },
    { label: 'Last Name', fieldName: 'LastName', type: 'text' },
    { label: 'Email', fieldName: 'Email', type: 'email' },
    { label: 'Phone', fieldName: 'Phone', type: 'phone' }
];

export default class RelatedContacts extends LightningElement {
    @api recordId; 
    contacts; 
    error; 
    columns = COLUMNS; 
    @wire(getRelatedContacts, { accountId: '$recordId' })
    wiredContacts({ error, data }) {
        if (data) {
            this.contacts = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.contacts = undefined;
            console.error('Error retrieving contacts:', error);
        }
    }
}

In the above code, we have defined a columns array to display the related contacts of accounts. After this, we have used @api recordId to get the Account Id from the record page, which is then used to query related Contacts via the controller class method getRelatedContacts.

The @wire decorator ensures that the getRelatedContacts method fetches related contacts with the account record ID. Then wiredContacts function assigns the returned data to a table using this.contacts or logs errors using this.error.

After this, enter the code below in the meta.xml file inside the <LightningComponentBundle> tag to make this page available to the account record page.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
            </objects>
        </targetConfig>
    </targetConfigs>

We have to show the contacts related to a specific account, so according to logic, the data table is specifically for the account record page.

Now, go to the account record page, click the settings icon, and select Edit page.

In the Lightning app builder, drag and drop the LWC component to the page region and save the changes.

Salesforce Lightning Data table with related records

Now, you will see that the data table will show the related contact records for the current account record.

Create a LWC data table with related rcords on record page

This way, we can fetch the data of related records of any specific object and display it in the LWC Lightning data table.

Conclusion

In this Salesforce tutorial, we have learned how to add related field columns in the LWC data table, where we fetched the associated fields from the apex class and displayed them in the data table column after formatting the related records into objects.

Along with this, we also created an LWC data table to display the related object record fields in the data table. In this, we displayed the contacts related to the specific account record on the account record page.

DOWNLOAD FREE AGENTFORCE EBOOK

FREE SALESFORCE FLOW EBOOK