I have a table populated by a search query. One of the fields is "status" which is open, closed, or null. There is a segmented control bar that sorts the data based on selection. The options are open, closed, or all.
I have a query that creates a new entry by writing the claim_id key to the tables that use it, leaving the rest of the fields null. Once the new row is added, I would like to automatically select it. What is the best way of doing this?
My initial though process was to set the value of the segmented control to "All" (since the new row will only show up there), get a list of all the claim_ids, find out what row the new claim_id is in, then select that nth row. The problem I ran into is that after I set the sort to All, the list of claim_ids is not complete as the table is not finished loading when it pulls them. I tried running the search query in a promise but the search query is ending and the table is still loading. Is there any way to wait for the table to finish loading before getting the claim_ids?
Hi @robinyoublind! There's probably a couple ways to go about this, but here's the potential solution that popped into my head:
Create a temporary state variable to store the index of the most-recently created claim, e.g newestClaimIndex.
Add two "success" handlers to your query to run after writing a new entry. The first triggers the search query to "refresh" the underlying data, and this should run synchronously. The second sets the value of newestClaimIndex. I can't really give tips on how to do this without knowing what type of database/API you're using, but generally you can try setting it to something like {{searchQuery.data.claim_id.length}} (assuming it's appended as the last row to the underlying database).
On your table, under "Row Selection", set the "default row" setting to "Index", and then set the index to use some JS like {{newestClaimIndex.value ?? 0}}. This should (hopefully) set the index to that of the newest created row automatically.
There may be some hurdles with the way your search query/table filtering works that I'm not seeing, but give that a try and let me know if it helps!
Just tried something similar to this and I almost have it. So doing it as you said didn't quite work, the search was getting triggered before the sql write was finished so you would have to refresh the table for it to show up. So instead after the sql write query promises finish, the index is set in a promise, then the search query is run after that in another promise.
The last issue is that the index is being set to the right row, but the table is not scrolling down to show it. How can I go about matching the table view to the selected row?
Ah, so for tables that use overflow: scroll, I am aware of an open bug in our Table component where rows selected using table.selectRow() or by setting default indices do not get automatically scrolled to if they are out of the current view of the table.
I'll keep you posted on the fix for that. But in the meantime, I think the best workaround would be to switch your table to overflow: pagination -- Tables that are paginated will automatically move to the page that has the selected/default index.
Just wanted to note that the new table component will scroll to the row that is set to be selected by default 