Responsive list with headers and click to open responsive detail of items from table


I am trying to create a list of tasks which when clicked on will expand and display the details of the task. I was hoping to use another list to contain the details which could be responsive to the screen they are shown on. I can’t figure this out!! please can someone help? (See attached graphic)

1 Like

You need to have custom backend to get this kind of data or you need to write the JSON manually into the Data sheets. Basically Data sheet needs one column containing array and using that array in the Items array setting for nested List/Grid element.

For expanding list item just create two states; one for expanded and one for “normal” and then switch between states with a change state interaction.

Something like this (Click arrow to expand/hide the embedded list):

Here’s the project file:

So I converted the data into an array which now sits in a column:


When I try and ad this to a list it jumps give me the full array as text. I see in the list in lists example each item in the array is named the same. do I need to do this?

The JSON does not look right. Check the JSON formatting e.g. from my example:


When the JSON is in proper format you can double click and “open” it to details view in Data sheet view.

Also make sure you sure you’ve populated the list with Items array (Not Data sheet) and the Column Data type is set to JSON?