Cannot access edited cell data (event, newlyEditedData, editedData all undefined) in Table Change Cell handler

Hello Retool Community,

I'm building an internal tool and running into a significant issue with a Table component where I need to capture cell edits to update a state variable and trigger recalculations.

Goal:
When a user edits a specific column (e.g., "Budget") in my table, I want to:

  1. Get the new value, row index, and column of the edited cell.
  2. Update a temporary state variable (an array) with this new value at the correct index.
  3. Trigger a JavaScript query to recalculate other values in the table based on the updated state.

Problem:
I am using the "Change cell" event handler on the Table component for this purpose. According to Retool documentation and common practice, the event object in this handler should provide details like value, rowIndex, and column. Alternatively, the table component's properties like {{ myTable.newlyEditedData }} or {{ myTable.editedData }} should provide information about the latest edit.

However, in my environment, when the "Change cell" handler fires, I have found through extensive console.log testing that:

  • The event object is undefined.
  • The myTable.newlyEditedData property is undefined.
  • The myTable.editedData property is undefined.

This behavior is consistent even in a very simple test table with minimal configuration and basic data.

Consequence:
Because I cannot access the edited cell's value, row index, or column within the "Change cell" handler, my script cannot correctly update the state variable. This prevents the downstream calculations from reflecting the user's edit in realtime.

What I've Tried:

  • Initially placed the script on the column's on-edit handler (resulted in undefined variables - expected based on context).
  • Moved the script to the table's "Change cell" event handler.
  • Attempted to access edited cell data using:
    • The event object (const { value, rowIndex, column } = event;)
    • The newlyEditedData property (myTable.newlyEditedData)
    • The editedData property (myTable.editedData)
  • Added extensive console.log statements in the handler to inspect event, myTable.newlyEditedData, and myTable.editedData. All consistently log as undefined.
  • Created a brand new, simple test table and added the same logging script to its "Change cell" handler. The result is the same: event, newlyEditedData, and editedData are all undefined.

Request:
Has anyone encountered a situation where event, newlyEditedData, and editedData are undefined in a table's "Change cell" event handler? Is there a specific setting on the table or in the Retool environment that could cause this? Are there any alternative methods to reliably get the edited cell's value and index in realtime if these standard properties are not available?

Any insights or workarounds would be greatly appreciated!

1 Like

Hi @rennielee5,

I think you might be looking for changesetArray. When you make a change to your table it adds the changed cell data as well as the id of your row. Make sure you set your Primary key in your table fort this to work.

Are you able to share a few screenshots to give us a little more context regarding your undefined variables?

1 Like

Hey there @rennielee5 and welcome to the forum!

Shawn is pointing you in the right direction!

Just wanted to also share this post, where I shared a tutorial that may be helpful for you right now. It explains how you can update the variable, and also trigger a query to update your back end. You can easily add another query there to make the other calculations you mentioned.

We're here to help, but as Shawn mentioned, it would be great if you can provide more screenshots, and, in particular with regards to the downstream calculations you're trying to do, maybe sharing a JSON of yorur table's data and what changes you would liek to achive.

Cheers!

3 Likes

guys thank you so much!! Looks like I'm back on the right track!

2 Likes