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:
- Get the new value, row index, and column of the edited cell.
- Update a temporary state variable (an array) with this new value at the correct index.
- 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 isundefined
. - The
myTable.newlyEditedData
property isundefined
. - The
myTable.editedData
property isundefined
.
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
)
- The
- Added extensive
console.log
statements in the handler to inspectevent
,myTable.newlyEditedData
, andmyTable.editedData
. All consistently log asundefined
. - 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
, andeditedData
are allundefined
.
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!