[SalesForce] How to use concatenation for columns of lightning datatable

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.

combination of name and mdm id

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;
        }
    }
}

Best Answer

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;     
    }
Related Topic