Create table with collapsible rows

App Building
1

Hi!

I'm trying to see if I can create a table with collapsible rows - something similar to this: Collapsible table rows in React - CodeSandbox

I have query that returns the core table data that I would want to always see in each row, for example
Project 1, Name
Proejct 2, Name

Then I have a second API that returns the team associated with that projects, for example, for Project 2 the data returned is
Person 1, Start Date, End Date
Person 2, Start Date End Date

I would like to be able to show the first data set in a table 'like' layout and then expand specific rows to see the team associated with each project

So far I can get this working (kind of) with a table component then a separate modal / container to show the team when clicking on an action but it feels clunky

I then tried a list component combined with this tutorial: Collapsible Container? from @bstone which again works great on its own but in a list component all of the rows behave the same way - collapse one, they all collapse

Open to any suggestions, happy to try some simple custom code if that's easier!

2

Hey vicdavies01! Thanks for reaching out about this. You can use the listview component to replicate this behavior, and you should be able to control each row individually.

1016×320 3.95 KB

1019×372 36.9 KB

In the listview you have access to i, the variable that tracks the index of the row in the listview. Here we are displaying that value in the label of the text input\

And using it to show / hide the image component of each row.

Let me know if this works for you!