How to use concatenation for columns of lightning datatable?

Question

I have used Lightning Datatable in my LWC. My requirement is to create columns as a combination of Account Name and Mdm Id. Example: 1st column should appear as Abacus,LLC - 10112842.

Using fieldName attribute twice gives a duplicate fieldName error. I tried many changes in code like: {fieldName: 'name + mdm'}, {fieldName: 'name'},{fieldName: 'mdm'}, {fieldName: 'name'+'mdm'}, etc but nothing worked. Is concatination possible using lightning datatable? If not, can I use HTML Table code from slds to achieve it?

Javascript:

const columns = [
    {
        label: 'Name',
        type: 'button',
        typeAttributes: {
            label: {fieldName: 'name'},
            variant: 'base',
        }
    },
    { label: 'Email', fieldName: 'email', type: 'email' },
    { label: 'Phone', fieldName: 'phone', type: 'phone'},
    { label: 'MDM ID', fieldName: 'mdm', type: 'text' },
];

HTML:

<lightning-datatable key-field="Id" data={wrappers} columns={columns}
      onrowaction={navigateToRecordViewPage} hide-checkbox-column="true">
</lightning-datatable>

Apex Class:

public with sharing class WrapperClass {

    @AuraEnabled(cacheable=true)
    public static List<wrapp> getWrapperList(String lead) {
        List<wrapp> wrapperList = new List<wrapp>();
            for(Account acc : [SELECT Id, Name, Master_Customer_ID__c FROM Account Where Name LIKE:'%ac%' LIMIT 5]){
                wrapp obj = new wrapp(acc);
                wrapperList.add(obj);
            }
            for(Contact con : [SELECT Id, Name, Email, Phone FROM Contact Where Name LIKE:'%adam%' LIMIT 5]){
                wrapp obj = new wrapp(con);
                wrapperList.add(obj);
            }
            for(Lead led : [SELECT Id, Name, Email, Phone FROM Lead Where Id=:lead]){
                wrapp obj = new wrapp(led);
                wrapperList.add(obj);
            }

        return wrapperList;
    }

    public class wrapp{
        @AuraEnabled
        public String id{get;set;}
        @AuraEnabled
        public String name{get;set;}
        @AuraEnabled
        public String phone{get;set;}
        @AuraEnabled
        public String email{get;set;}
        @AuraEnabled
        public String mdm{get;set;}

        public wrapp(Account acct){
            id = acct.Id;
            name = acct.Name;   
            mdm = acct.Master_Customer_ID__c;     
        }
        public wrapp(Contact cont){
            id = cont.Id;    
            name = cont.Name; 
            phone = cont.Phone;   
            email = cont.email;  
        }
        public wrapp(Lead lead){
            id = lead.Id;    
            name = lead.Name; 
            phone = lead.Phone;
            email = lead.Email;
        }
    }
}

Answer 1

Why not do it it apex? and keep LWC as is?

    public wrapp(Account acct){
        id = acct.Id;
        name = acct.Name + '-'+acct.Master_Customer_ID__c;   
        mdm = acct.Master_Customer_ID__c;     
    }

Answer 2

added

Below should resolve for undefined:

concatenateCols() {
    this.columns = [...this.columns, { label: 'fruit-weight', fieldName: 'fruitWeight' }];
    this.data = this.data.map(item => {
        return { ...item, fruitWeight: `${item.name ? item.name : ''}${(item.name && item.weight ? ' - ' : '')}${item.weight ? item.weight : ''}` };
    });
}

Updated link: playground link

---

datatable is merely a visualization of data you provide. It just transforms the list of records in table format and renders in UI. So, in your case you should concatenate 2 columns and create a new column by giving it appropriate field name.

Below is the sample code to add concatenated column:

@track columns = [
    { label: 'Id', fieldName: 'id' },
    { label: 'Fruit', fieldName: 'name' },
    { label: 'Weight', fieldName: 'weight' }
];
@track data = [
    { id: '1', name: 'Apple', weight: '2' },
    { id: '2', name: 'Banana', weight: '7' }
];

concatenateCols() {
    this.columns = [...this.columns, { label: 'fruit-weight', fieldName: 'fruitWeight' }];
    this.data = this.data.map(item => {
        return { ...item, fruitWeight: `${item.name} - ${item.weight}` };
    });
}

playground link for the working example

Answer 3

This code below should work:

@track records;
@track columns = [
        {label: 'Name', fieldName: 'nameMdmId', type: 'text'},
        { label: 'Email', fieldName: 'email', type: 'email' },
        { label: 'Phone', fieldName: 'phone', type: 'phone'},
        { label: 'MDM ID', fieldName: 'mdm', type: 'text' },
    ];

    @wire(getWrapperList, { /* params here */ })
    wireAccountInfo({ data, error }) {
        if (data) {
            let mdm;
            this.records = data.map(record => {
              mdm = record.mdm ? record.mdm : '';
              return { nameMdmId: `${record.name} ${mdm}`, ...record } 
            });
            this.error = null;
        }
        if (error) {
            this.error = error;
            this.records = [];
        }
    }

Html:

<lightning-datatable key-field="Id" data={records} columns={columns}
      onrowaction={navigateToRecordViewPage} hide-checkbox-column="true">
</lightning-datatable>

Update

Updated a bit the code. I have used record.Name instead of record.name