Expandable Rows Table

[drkb]

Hello, I am creating an app that has a table with expandable rows. In these expandable rows I have another table that is an "in-depth" table of the selected row. I have already written a script that collapsed the previous row when I open a new row but the in-depth table doesn't update. It does update if I refresh the table (but that takes a couple seconds) or if I close and reopen the expanded row.

The transformer that is creating the in-depth table is referencing the selected source row of the outer table. Here is part of the transformer that is doing the reference.

const farmMap = new Map({{farm.data}}.map(farm => [farm.farm_id, farm]));
const filteredParts = {{parts.data}}.filter(part => 
  part.projection_order_id === {{table1.selectedSourceRow.id}}
);
const unallocFarmers = {{unalloc_farmers.data}}.filter(uf => 
  uf.proj_order_id === {{table1.selectedSourceRow.id}}
);

If you know how I can fix this issue I'd greatly appreciate it. Here are some pictures to explain the issue visually.

Working for the first entry

Not updating properly

Fixed after closing and reopening

[WidleStudioLLP]

Hello @drkb ,

You can trigger your expandable table data query by setting the main table's event to "Expand Row".

Additionally, declare a variable with a null value and add a second event in the event handler.

• My expandable table data has been updated, starting with the first employee's data.

• Second Employee data

[drkb]

I implemented these changes but I get a different set of issues with this. My expanded rows no longer auto collapse. I still get the same issues. When I click the new expanded row by the arrow key, the selectedRow doesn't fully change in the background is my only thought for what might be happening.

The table on the left is using the method you suggested. The table on the right is the previous set up.

[WidleStudioLLP]

Hey @drkb ,

You can try these solutions to resolve the issue:

• Use {{table1.selectedRow.id}} instead of {{table1.selectedSourceRow.id}}.

• There's no need to set a primary key in table1.
  

---

• Check the Cell Selection, Row Selection, and Default Row settings in your table.
  

---

• First, trigger the Run Script, then trigger your list query in the Table Event Handler.
  

Let me know if you need further clarification!

Thank You.

[drkb]

I appreciate you spending the time to help me with this. I'm still struggling to get it to work and I'm not sure what I'm missing. It feels like it should be pretty simple, when I expand the row the javascript query runs and generates the data for the table. I attached a video showcasing the changes I've made using your suggestions and the results. If you could advice me further I'd greatly appreciate it.

[WidleStudioLLP]

Hello @drkb

Apologies for the issue. I checked your reference GIF and provided all possible tips and solutions, but I'm not sure why it's not working. If possible, please share more details or the app's JSON file so I can help identify and fix the issue. This trick works perfectly in my app.

[drkb]

After sharing the JSON we were unable to find where the issue was so I've been trying more things. Next I tried to remove the filter from the transformer and have the table itself handle filter but that had the same issue.

If anyone else has so ideas I'd be happy to try them.

[WidleStudioLLP]

Hey @drkb ,

Apologies for the issue with the expandable table trick not working. Additionally, I have a forum link that might help fix the issue. Please check it out:

Programmatically Expand/Collapse (Expandable) Rows in Table

Hi there! Excited to share that Cloud now has expandRows and collapseRows methods for the table (it should ship to on prem in the next couple of weeks) [image] [image]

[Darren]

Hey @drkb! The symptoms you're describing make it sound like selectedRow is changing asynchronously and not triggering your transformer correctly. If you can share a JSON export of your app with hard-coded query results, I'd be happy to take a look.

[Darren]

I'm still not 100% that I know what was causing this, but I fixed it by generating the in-depth table data within a JS query instead of a transformer.

Because JS queries need to be explicitly triggered, I did so via an onSelect event handler.

I hope that helps! Let me know if you have any follow-up questions.

[drkb]

I did end up implementing that. Thank you very much for the help. It does have the caveat that if you select a row without expanding it the table changes.

But that is acceptable. I would love if that async issue was fixed in the future. For now we will get by with this little quirk.

Thank you for the help.