I’d like the table component to automatically have the row with key 0cc8e893-c063-4f52-9507-4250edbdf102 selected when the application loads.
To do this, I’ve configured the application as follows:
On the table, Select row handler Set URL parameters to the key identifying the row.. This part works, I can see the query parameter changing as I click on different rows in the table
Hi @jcace — I tried this in my app as a demo, and it’s working correctly on my side. If the row matching the URL param exists when the table renders, it’s selected automatically. If the data loads later (due to slower queries, refetches, filters, or pagination), Retool doesn’t re-evaluate the default key so that the row won’t be selected.
I’ve shared a screenshot showing the selected URL, and opening the same URL in another tab also works for me. Could you please re-check your query? I have mine set to run on page load.
Perhaps this is the issue, as the query to retrieve my table data fetches from a Postgres database and it takes a couple hundred milliseconds to complete. The query is set to run on page load.
Is there any way to force Retool to re-evaluate the default key / row selection after query has completed?
I tried adding the following Success handler to the db query, even with a short debounce delay, but it still does not appear to work.
To answer your question of "Is there any way to force Retool to re-evaluate the default key / row selection after query has completed?"
If you store this in a variable, such as a global variable, then whenever it is updated, the component will automatically notice that it has been updated and re-render with the new data accordingly.
Hi @Jack_T , thanks for the note. I don’t think that will help in this situation.
I tried creating a global variable, and setting its initial value to {{ url.searchParams.document_id }} , then using that as the table’s default key, but it did not change the behavior.
Unless you mean storing the query’s output in a variable and using that as the table’s data source? However I’m unsure how that would fix it. This problem is derived from the fact that the Default key specified on the table doesn’t seem to be applied after the data is loaded
It looks like there are two options for setting the selected row from the URL, I used hash params in my testing.
Set the table's 'Default key' to be a variable, then have a JS Query update this variable to be the value from the URL, as an integer. Then have this query run on page load and it will appear once the table's data populating query finishes(which should also be set to run on page load). The URLs are read as strings so it does need to be converted
Use the table's .selectRow to select a row from the table. This shortcuts around needing a variable and then storing the variable as the 'Default Key'.
(I tried with page load delay 0, 1000, and even tried triggering this script from the query’s success handler instead of “Run this query on page load”)
I’m testing by loading up the app. Clicking a row (which triggers the url searchparam to set), and then refreshing the page. Once it loads back up, the row is not selected.
Let me know if you are able to watch this recording of me setting it up.
It starts with the run on page load where it has already switched the index from 4 to 8. Then I reload the page with the auto query run turned off and manually run the query to update the variable that is assigned to the default index for the table.
