Hello,
I am trying to implement a table with expandable row support.
The expanded section would be another table component which needs access to the currentRow Id to populate its data.
Similar to a row of all products, and expanding each row will fetch all the purchases for that product.
How can pass this currentRow Id to my child queries to show relevant data ?
@amith's problem is harder: How could you access the results of a query that depends on anything in currentRow?
I tried {{ Promise.resolve(query1.trigger({additionalScope: {name: currentRow.name},})) }} where query1 is configured to use the name variable. However, retool complained that query1.trigger() is not a function!?
This seems like a fundamental use-case of expandable rows! And I have exactly the same problem. I'd be really grateful if the Retool team could address this.
The only workaround I can think of is to modify the query of the "outer" table to include the data for the expandable row and to access it via currentSourceRow.
Yes, exactly that has been my problem.
I think your suggestion of adding data to the "outer" table is the same thing i was hacking over the weekend... long story short, i have a date span and from there, i get a list of orders, grouped by customer, supplier, order count, order totals sum'd up, etc. and from there, i want to expand said row to display all orders but i can't seem to get "CurrentRow" to do what i need, so i've added creating an array of orderIDs that's hidden on the "parent/aka outer table" records - which is kind of working, but all the expanded rows show me the same children records (the last expanded row)
By now I implemented the mentioned workaround successfully.
I added a JSON column inner_json_tab to the query of the outer table (relatively easy in Postgres) and it essentially contains the nested table as a JSON array of objects. I hide this field in the outer table.
After configuring {{ currentSourceRow.inner_json_tab }} as the inner table's data source everything works, i.e., I don't have @josh2e's problem.
Hi there,
Thanks for reaching out 
currentRow is defined from the table, so it works well when referenced directly inside nested component configurations or when dynamically referenced inside standalone components.
In nested component configurations:
@Skizhu provides an example of populating a component with {{currentRow}}.
You can expand on this same concept by filtering query data to only show values relevant to the current row. Here's an example where I'm passing in all of my nested data to the table in the expandable rows and then filtering inside the component set up:
With standalone components that are not nested in the table, you can pass currentRow from a component in the expanded row. Here's an example where I trigger a query from the expanded row (so currentRow is in scope) and then display that query in a standalone table. Note that the linter may warn you that currentRow is not defined, but it will be once you trigger the query from the table. In my case, I'm returning the currentRow object inside an array so that I can show it in another table.
This approach doesn't work well for nested components. You will run into issues if you have more than one row expanded at a time, the query will update all of the nested components with the same currentRow value.
As already mentioned in this thread, you could combine all of the data into the first table and then access it with currentSourceRow in the expanded rows
@cstork Where did you use the code {{ Promise.resolve(query1.trigger({additionalScope: {name: currentRow.name},})) }}? Since it has the {{}} it seems like you might be using this code in a transformer? If so, you cannot use .trigger() within a transformer. It needs to be used inside a run script event (without the {{}} around it) or in a Javascript query.
Again, you can pass the currentRow values to a query using additionalScope, but if you're displaying that query in a nested component, it will incorrectly update all expanded rows with the same data.
Hi @Tess, thanks so much for the follow-up!!!
I wasn't aware of the trick to use currentRow in a JS resource triggered by a nested component. Very nice!
To answer your question re {{ Promise.resolve(query1.trigger({additionalScope: {name: currentRow.name},})) }}. I tried that as the data source of the nested table. Here's a presentable example (with different variable/column names):
I really don't understand the error message 
(which reminds me of my desire for some kind of whitepaper re retool's "reactive dependency graph logic" 
).
To be honest, right now, it looks to me that retool does not support context-dependent queries in nested components. The trick to filter another query with data from currentRow is a variation of the known workaround but not the same as a new query. :-/
Hi @cstork
You cannot call a query (cannot use .trigger()) from within a components data source. While you can use Javascript inside of {{}} as a data source, it should be one liner, self-evaluating code. Triggers, promises, and more complex code should be moved to a Javascript query that is triggered on page load, on success of a resource query, or based on some user action.
Yes, in regards to your ask about a whitepaper, I've been looking through our docs, internal notes, blog posts, etc. 
I don't have an update for you yet, but we have some internal requests for more documentation on this topic. I'll let you know if the team ships any resources that could be helpful. In the meantime, we'll help with questions here on the forum 
These resources might help as well:
This post shares some Javascript best practices.
The debug tool shows specific dependencies of queries/components:
Thanks for your comprehensive reply, @Tess, especially the links to JS best practices and the debug tool are appreciated.
The only comment I'd have would be that maybe Retool could interprete the expansion of a row as a user action, since AFAIU table rows can only be expanded by some kind of explicit action anyway. Then this could trigger the JS query.
