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, 2022 at 19:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .