I am working in Lighting DataTable(LWC), on rowaction I want to change the button-Icon icon name if the icon is active/inactive.

Is there any way to update the event detail data from interation

I tried with this, but not working. event.detail.action.iconName = "utility:open";

Data getting on row action

  • Are you trying to set the icon inside the cell dynamically? – Rahul Gawale Jun 17 '20 at 10:11

For some reason, @track won't automatically refresh the table, so you have to copy the array back into itself. I've created a demo for you.

import { LightningElement } from "lwc";
export default class App extends LightningElement {
  data = [];
  columns = [
      label: "Name",
      fieldName: "name",
      type: "button-icon",
      typeAttributes: { iconName: { fieldName: "iconName" } },
  connectedCallback() {
    this.data = [...Array(10).keys()].map((value) => ({
      id: value,
      name: `Demo ${value}`,
      iconName: "utility:success",
  onrowaction(event) {
    if (event.detail.row.iconName === "utility:error") {
      event.detail.row.iconName = "utility:success";
    } else {
      event.detail.row.iconName = "utility:error";
    this.data = [...this.data];

  • +1 thanks @sfdcfox, although I am iterating over the data and match the row with id and setting the updated data back.. Anyway, your solution is good, I have to remove iteration. – Sarvesh Jun 17 '20 at 17:40
  • @Sarvesh the iteration method works, too. The key is to create a new array each time. – sfdcfox Jun 17 '20 at 17:47

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.