0

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;
        }
    }
}
  • 1
    can you share your apex class, please? – dibocor Nov 18 '19 at 7:15
  • @dibocor Sure, added it in the question. Thanks! – Koustubh Nov 18 '19 at 7:19
2

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;     
    }
| improve this answer | |
  • Yes, it was easier – dibocor Nov 18 '19 at 8:21
  • That works. It's the easiest way to do it. It also solves the undefined problem too. Thankyou :) – Koustubh Nov 18 '19 at 8:32
4

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

| improve this answer | |
  • Thankyou for the help. Problem is, if an account does not have Mdm Id, it gives undefined instead of blank space. Example: Abacus,LLC - undefined. Playground link for example. Can I insert a check for undefined? – Koustubh Nov 18 '19 at 8:07
1

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

| improve this answer | |
  • This works. Thanks a lot! The problem is, if an account does not have Mdm Id, it gives undefined instead of blank space. Example: Abacus,LLC - undefined – Koustubh Nov 18 '19 at 7:59
  • I have updated a bit my answer. Please, let me know if it solves the problem – dibocor Nov 18 '19 at 8:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.