How to Concatenate Columns in LWC Lightning Datatable?

In the Salesforce Lightning data table, there is no built-in support for concatenating table columns so that we can display the data of two or more columns in one column. For example, we could concatenate the “First Name” and “Last Name” fields from a list of contacts into a single “Full Name” column.

In this Salesforce tutorial, we will learn how to concatenate columns in the LWC lightning datatable.

Table of Contents

Concatenate Columns in Salesforce LWC Lightning Datatable

To concatenate the Salesforce LWC Lightning datatable columns, create a Lightning web component and follow the steps below.

First, we will create a controller class to dynamically fetch and display the data in the Lightning Data Table.

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        return [SELECT Id, Name, BillingCity, BillingCountry FROM Account LIMIT 5];
    }
}

After this, we will create an LWC component and define the logic to render the values of two field columns, BillingCity and BillingCountry, in a concatenated column location.

import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

export default class AccountDatatable extends LightningElement {
    columns = [
        { label: 'Account Name', fieldName: 'Name', type: 'text' },
        { label: 'Location', fieldName: 'location', type: 'text' }
    ];

    accountData = [];

    @wire(getAccounts)
    wiredAccounts({ error, data }) {
        if (data) {
            this.accountData = data.map(account => {
                return {
                    ...account,
                    location: '${account.BillingCity || ''}, ${account.BillingCountry || ''}'.trim()
                };
            });
        } else if (error) {
            console.error('Error fetching accounts:', error);
        }
    }
}

In the above code, we have used the @wire decorator, which connects the component to the getAccounts Apex method. Then, the wiredAccounts handler processes the response: if successful, it maps the account data, using the ‘…’ spread operator to include all existing properties.

It creates a location field by combining BillingCity and BillingCountry with || ” for null values and trim() to remove extra whitespace.

After this, enter the code below in the HTML file to render the UI of the lightning data table.

<template>
    <lightning-card title="Datatable with concatenated column" icon-name="standard:account">
        <div class="slds-p-around_medium">
            <lightning-datatable
                key-field="Id"
                data={accountData}
                columns={columns}>
            </lightning-datatable>
        </div>
    </lightning-card>
</template>

Enter the code below in the meta.xml file to make the component visible to the Lightning pages.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>63.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

To deploy the LWC component, navigate to the Lightning page, click on the settings icon, and select the Edit page button.

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

Now, on the lightning page, you will see that the values from the fields Billing City and Billing Country are concatenated in the table column Location.

How to concatenate Lightning data table columns

This way, we can concatenate two or more columns in the LWC Lightning datatable and return the combined values in a single datatable column.

Conclusion

In this Salesforce tutorial, we have learned how to concatenate columns in the LWC Lightning DataTable. In the above example, we have concatenated the field values Billing City and Billing Country and returned the concatenated value in the column Location.

For this, we have used the “spread operator (…) ” which allows us to copy all values from an existing array or object into another array or object.

How to Concatenate Columns in LWC Lightning Datatable?

Concatenate Columns in Salesforce LWC Lightning Datatable

Conclusion

DOWNLOAD FREE AGENTFORCE EBOOK

FREE SALESFORCE FLOW EBOOK