Table Row Selection from URL Parameter on Page Load

💬 App Building
1

Hi, I have an app that gets information from a query on page load and feeds it into a table component. The table component has Multi-row-select enabled, and the page data is dependent on which rows are selected.
I would like a URL parameter to reflect the currently selected table rows, so that they can share that page to someone else and then on page load, the table will select the rows from the URL parameters.

I would like this to work by making use of the Default Keys parameter on the table component but I cannot get this to work, I have tried setting the URL parameters by using the page settings like so:
image

And I have also tried workaround such as adding event handlers to change update the URL parameters when the table row selection changes.

I have gotten this to work with complicated workarounds such as having a variable that tracks if it is the first load of the data, and event handlers that when the data is done loading for the first time call the selectRow function on the table with the URL parameters, but not only is this a complicated workaround for what I would think is a semi-common design pattern, it also is inconsistent depending on how much data the table is loading.

It seems that for large data sets the event handler for fetching the data will run before the table component has populated with everything, and so then you have to add sleep functions in but this is terrible because then on slow connections the sleep might not work, etc.

Any help would be appreciated.

2

Hi @connorjan.

One way to do this is to add an event handler on your table on Select Row then set your action to Set URL parameters. You will have to set it as a Hash parameters and convert the selected row keys from an Array to String.

Here's a sample:

image
image379×491 24.8 KB

Then on your table's Default Keys get that keys that you converted to string, split them to convert them into an array again then convert each item from string to a number. Because ["3"] is different from [3] and an array of strings doesn't work there.

Here is a sample:

image
image328×108 4.97 KB

Let me know if it works for you!

3

Hi @connorjan , and thanks for adding that solution @Christian_Pelitones. I'll note that this works for smaller datasets, although you do need a similar event handler for deselect row. I tried this and a couple other different solutions to this problem and found that they didn't consistently work with larger amounts of data loaded into the table.

I submitted a bug report since Ideally it shouldn't require a workaround in the first place (although I did try for a while to find one).

I know you've been at this for a while based on our office hours so if you've found your own workaround feel free to share, we'll also be sure to add updates here on fixing this bug as things progress.

1 Like