Hi Retool Community & Retool Team ,
I'm new to building UI with Retool and would like some assistance
Context:
I have a Retool app that renders a table which displays attributes about a person (first name, last name, status, etc). Let's call this table1. Data are populated by an API response call. In the example data below, I have 3 Javascript objects which means table1 should display 3 rows.
I have table1 set up in a way that when I click on a row (that's not a header row), a modal pops up. This modal would display another table with data from this row for viewing purposes only. Let's call this table2.
My Question:
How do I make an extra row display in table2 using the parsed extra_tags
attribute when I click on a row in table1? The 2nd row in table2 should render only when extra_tags
is present. If extra_tags
is not present in the Javascript object, only 1 row is render in table2.
Things I've tried:
I originally thought after parsing extra_tags
, I could some how inject them in a row of my choosing but quickly found myself asking "where would I store this data?". I don't want to store it in local_storage for privacy concerns.
I tried adding a new row in table2 but ran into error: No Saving new rows event handler configured for table2
. Still couldn't find a way to access the data I parsed to add it in this new row.
exampleData = [
{
first_name: "Alice",
last_name: "Wonderland",
current_country: "Not in Kansas",
status: "single",
},
{
first_name: "Captain",
last_name: "Jack Sparrow",
current_country: "Caribbean Sea",
status: "single",
},
{
first_name: "Jennifer",
last_name: "Smith",
current_country: "Croatia",
status: "single",
extra_tags: '{"first_name": "Jennifer", "last_name": "Miller", "status": "married", "current_country": "France"}'
},
]