3

I have a lwc component with a lightning-datatable with the first column as a button-icon. This works when the columns are defined as a constant.

Constant working

const columns = [
    {
        label: 'View',
        type: 'button-icon',
        initialWidth: 75,
        typeAttributes: {
            iconName: 'action:preview',
            title: 'Preview',
            variant: 'border-filled',
            alternativeText: 'View'
        }
      },
 {fieldName: 'Name', label: 'NAME', type: 'text'},
{fieldName: 'BillingCity', label: 'CITY', type: 'text'},
{fieldName: 'BillingCountry', label: 'COUNTRY', type: 'text'},
{fieldName: 'BillingPostalCode', label: 'POSTAL CODE', type: 'text'},
{fieldName: 'Phone', label: 'PHONE', type: 'text'},
{fieldName: 'Owner.name', label: 'OWNER', type: 'text'}
];

Is it possible to make all the other columns dynamic except for the button-icon? I tried the following but this is not working. Adding columns & fields from metadata to icon column:

const columns = [
    {
        label: 'View',
        type: 'button-icon',
        initialWidth: 75,
        typeAttributes: {
            iconName: 'action:preview',
            title: 'Preview',
            variant: 'border-filled',
            alternativeText: 'View'
        }
      }
];





 @wire(getDynamicTableDataList, { TableName: '$objectListApiName' })
    wiredContacts({ error, data }) 
    {
        if(data) 
        {
           let sObjectRelatedFieldListValues = [];
            
           for (let row of data.lstDataTableData) 
           {
                const finalSobjectRow = {}
                let rowIndexes = Object.keys(row); 
                rowIndexes.forEach((rowIndex) => 
                {
                    const relatedFieldValue = row[rowIndex];
                    if(relatedFieldValue.constructor === Object)
                    {
                        this._flattenTransformation(relatedFieldValue, finalSobjectRow, rowIndex)        
                    }
                    else
                    {
                        finalSobjectRow[rowIndex] = relatedFieldValue;
                    }
                    
                });
                sObjectRelatedFieldListValues.push(finalSobjectRow);
            }
            this.DataTableResponseWrappper = data;
             console.log(data.lstDataTableColumns);
        const col = columns.concat(data.lstDataTableColumns);
        console.log(col);
            this.finalSObjectDataList = sObjectRelatedFieldListValues;
        } 
        else if (error) 
        {
            this.error = error;
        }
    }

I debugged the following:

const col = columns.concat(data.lstDataTableColumns);
            console.log(col);

this seems correct but is not rendering as suspected see: enter image description here

How do I achieve this? Thanks in advance

1 Answer 1

6

Define the class level attribute to store the columns, columns. From the wired method add the dynamic columns to that.

export default class MyComponent extends LightningElement {

    @track columns = [
        {
            label: 'View',
            type: 'button-icon',
            initialWidth: 75,
            typeAttributes: {
                iconName: 'action:preview',
                title: 'Preview',
                variant: 'border-filled',
                alternativeText: 'View'
            }
          }
    ];
    
    
    @wire(getDynamicTableDataList, { TableName:'$objectListApiName' })
    wiredContacts({ error, data }) 
    {
        if(data) {
            this.columns = [...this.columns, ...data.lstDataTableColumns];
        }
    }
}
4
  • Thanks for helping. Could you elaborate a little bit more. I tried this but get the error [columns is not defined] I tried const columns = []; but then the button isnt rendered, I tried api columns; but then only see the label column button
    – Thomas
    Oct 16, 2021 at 10:18
  • @Thomas I have updated the code please check. Oct 16, 2021 at 15:17
  • 2
    Thank you very much this resolved it!
    – Thomas
    Oct 16, 2021 at 18:01
  • Would you guys have any insights into this. ANything I can refer? Any help is appreciated -salesforce.stackexchange.com/questions/380775/…
    – SfdcBat
    Jul 16 at 19:47

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.