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.... Jan 8, 2022 at 19:25
  • 1
    Remember though, you can use track instead of manually copying the array.
    – sfdcfox
    Jan 8, 2022 at 23:54
  • @sfdcfox Yeah that's what I thought but OP has already used track. but it didn't work somehow. Jan 9, 2022 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, 2022 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, 2022 at 15:32

You must log in to answer this question.

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