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
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'
}
}