Table component row select value returns null, even though dropdown displays correctly

💬 App Building
1

Hi, I'm working on a Retool table to input multiple rows of data and save them all at once.

One of the columns is category_id, which uses a Select component inside the table cell to let the user choose from a list.

The dropdown displays properly, and I can select a value from the list.
However, when I try to log the value from the selected row, it returns null.

Here’s what I’ve checked:

  • The Select uses data from a query like select_category_query.data
  • value and label are both mapped correctly (item.id, item.name)
  • I confirmed that the select component is working visually, but in my console.log(table_data_var.value), the row index is correct but the value of category_id is always null

Screenshot:

image
image1226×630 65 KB

Any ideas why the value is not getting captured?

Thanks in advance!

2

Hey @krsailer82,

I can try this as a demo in my app. You can give it a shot too:

const editedData = table_entry.changesetArray;
console.log("Edited rows:", editedData);

Just replace selectedrows with changesetArray, and it should work perfectly.

image
image1859×792 79.7 KB

Also, make sure that the mapped value for the category_id editable column is set correctly.

Let me know if you'd like any more adjustments!

1 Like
3

Thanks for reaching out, @krsailer82! This is a common point of confusion. To @WidleStudioLLP's point, table edits are are not propagated to the backing data source - and thus table.data - unless you specifically write queries to do so. All edits are instead stored in what we call the "changeset", either changesetArray or changesetObject, depending on how you want it formatted.

I hope that helps! Let us know if you have any clarifying questions.

2 Likes
4

Have you had a chance to review this, @krsailer82?