1

I have this below lwc data-table in which i have a column with slds icon. these icons are button icons which are clickable .

On the icon button click i am calling callRowAction function in which i am trying to change the icon color filing from slds-icon-text-warning to slds-icon-text-error.

after clicking i think the value is changing, but the updated color is not getting refresh on the page.

How to refresh the color on the page

enter image description here

HTML -

<template>
    <lightning-datatable key-field="id" columns={cols} data={data} onrowaction={callRowAction}>
    </lightning-datatable>
</template>

JS -

import { LightningElement, track } from "lwc";

export default class App extends LightningElement {
     @track cols = [
 
        { 
          type: 'button-icon', typeAttributes: { 
            iconName: { 
              fieldName: 'iconPriority' }, name: 'priority', iconClass: { 
                fieldName: 'iconPrioritycss' }, variant: 'bare' }, initialWidth: 30 
                },
        {
            fieldName: 'name',
            label: 'Name'
        }
    ];

     @track data = [
        {
            id: 1, name: 'Opportunity 1', iconPriority: 'utility:favorite', iconPrioritycss: 'slds-icon-text-warning'
        },
        {
            id: 2, name: 'Opportunity 2', iconPriority: 'utility:favorite', iconPrioritycss: 'slds-icon-text-warning'
        }
    ]

    callRowAction(event) {
        this.tskId = event.detail.row.Id;
        const actionName = event.detail.action.name;
        if (actionName === 'priority') {
            console.log(JSON.parse(JSON.stringify(event.detail.row)).id)
            this.changeiconcolor(JSON.parse(JSON.stringify(event.detail.row)).id);
        }
    }

    changeiconcolor(num) {
      alert(num)
      console.log(this.data[num - 1])
     this.data[num - 1].iconPrioritycss = 'slds-icon-text-error'
    }

}

1 Answer 1

1

The problem is that the framework does not know when you change the inner property of the array. So you need to reinitiate the data property.

Also, you don't need to do JSON stringify in the callRowAction just pass the row id in the other function.

Make the below changes in two functions callRowAction and changeiconcolor

callRowAction(event) {
  this.tskId = event.detail.row.Id;
  const actionName = event.detail.action.name;
  if (actionName === "priority") {
    this.changeiconcolor(event.detail.row.id);
  }
}

changeiconcolor(num) {
  this.data[num - 1].iconPrioritycss = "slds-icon-text-error";
  this.data = [...this.data]
}

Check the live playground example here

6
  • thanks rahul....
    – hellraizer
    Jan 8 at 19:25
  • 1
    Remember though, you can use track instead of manually copying the array.
    – sfdcfox
    Jan 8 at 23:54
  • @sfdcfox Yeah that's what I thought but OP has already used track. but it didn't work somehow. Jan 9 at 13:47
  • 2
    FYI, here's the replication of the problem. I'm going to try to bring this to someone's attention. In the interim, copying the array is necessary. Thanks for bringing that to my attention!
    – sfdcfox
    Jan 9 at 14:53
  • 1
    There's an open bug for this already, so not much more we can do at the moment.
    – sfdcfox
    Jan 9 at 15:32

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.