Category: Widget
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

Is It Possible to Disable the Selected Row On Button Click?

Issue

I want to be able to disable/enable a particular row in a table on a button click. I can use the storeValue function to store the selected row index and then bind it to the Default Selected Row of the table to disable/enable it. Alternatively, I can use resetWidget function to remove any selected rows. However, I cannot edit row values, only perform actions on columns with buttons or icons.

Resolution

You can disable the action button for the specific row that was clicked by storing that row’s ID and binding the Button column’s Disabled property to it.

1) Add a stable row identifier
Make sure your table data has a unique id (or set the Table’s Primary key column accordingly). This helps reliably target the clicked row.

2) Toggle a list of “disabled” row IDs on click
In the Button (or Icon Button) column → onClick, enable JS and use the row that fired the event via Table1.triggeredRow (see Column settings for triggeredRow/currentRow). Then update the store using storeValue() with session-only persistence (persist=false):

{{
  const id = Table1.triggeredRow.id;
  const list = appsmith.store.disabledRowIds || [];
  const next = list.includes(id)
    ? list.filter(x => x !== id)   // re-enable if already disabled
    : [...list, id];               // disable if not yet disabled
  storeValue("disabledRowIds", next, false); // session-only
}}

3) Disable the button per row
In the same Button column → Disabled (JS):

{{ (appsmith.store.disabledRowIds || []).includes(currentRow.id) }}

Optional resets

See: Table widget (Primary key column, reference properties like triggeredRow), Column settings (Button/Icon Button), storeValue(), removeValue().