1

With an aura component lightning:datatable its possible to change the label of a button on rowaction. In fact an example is provided in the lightning component reference by changing the label fieldName 'actionLabel'.

editRowStatus: function (cmp, row) {
    var data = cmp.get('v.data');
    data = data.map(function(rowData) {
        if (rowData.id === row.id) {
            switch(row.actionLabel) {
                case 'Approve':
                    rowData.actionLabel = 'Complete';
                    break;
                case 'Complete':
                    rowData.actionLabel = 'Close';
                    break;
                case 'Close':
                    rowData.actionLabel = 'Closed';
                    rowData.actionDisabled = true;
                    break;
                default:
                    break;
            }
        }
        return rowData;
    });
    cmp.set("v.data", data);
},

Has anyone found the way to do this with the lightning web component of lightning-datatable? My column button is defined as

{label: 'View Files', type: 'button', typeAttributes: {label: {fieldName: 'NumberOfFiles'}, title: 'View', name: 'view_files', disabled: {fieldName: 'DisableViewFiles'}}},

The label fieldName is NumberOfFiles and is manipulated with the following where the datatable data is @track workOrderLineItems. I'm unable to change the field label and have been unable to find a workaroud.

handleFileUpload(event) {
        let rowId = event.detail.rowId;
        let files = event.detail.files;

        if(files !== undefined && files.length > 0) {
            for(let i=0; i<this.workOrderLineItems.length; i++) {
                if(this.workOrderLineItems[i].Id === rowId) {
                    this.workOrderLineItems[i].NumberOfFiles = (this.workOrderLineItems[i].NumberOfFiles + files.length).toString();
                    this.workOrderLineItems[i].DisableViewFiles = false;

                    break;
                }
            }
        }
    }    
0

If anyone runs into this issue the workaround I found is to deep clone the the array of data that is feeding lightning-datatable and and reassign to the array.

As an example, workOrderLineItems is feeding my lightning-datatable:

let tempLineItems = JSON.parse(JSON.stringify(this.workOrderLineItems));
this.workOrderLineItems = tempLineItems;

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.