Collapsible row in datagrid

Ask us anything
1

Hi,

I have a data grid that shows shipment information -

Date, Shipment #

It is possible that a shipment can have multiple lines of notes (date, comment) with it.

Is it possible to have expanding rows in a datagrid will show the notes when the row is selected?

14 Jan | :play_button: #1243

14 Jan | ▼ #1243
├─ Date - Shipment processed
├─ Date - Shipment packed
└─ Date - Shipment collected

Thanks
Steve

2

Hi Steve :waving_hand:

That is an interesting challenge.

WeWeb’s native datagrid does not support true “expandable / collapsible” detail rows out of the box.
​
However, you can approximate this behaviour by combining a custom column with another component (like a dropdown or conditional container) that reveals the related note lines.

Let me know how it goes!

3

Hi Agustin,

Thanks for the response. I have since realised that what I want to do wouldn’t work as the data for the rolled-up rows will be coming from another collection. Believe that I will have to use a modal instead.

Thanks

1 Like
4

You could also fake it, aka have the data present, but only show it once the user clicks on this row and sets a variable… this should work in principle.

5

Hi Toby,

Could you explain this approach a bit more?

Thanks
Steve

6

image
image1279×429 10.1 KB

Instead of using the datagrid use the table component. Within the collection list on the table you bind your data which should be grouped. You would add another container within the rows and another list within the container that is binded to a variable that on click would show the data. Pretty simple if your data is all grouped correctly.

If you wanted to use the datagrid maybe on click you could have a popup that would show further details, that would be the easiest setup.

1 Like
7

Hi,

Thanks for the explanation. I believe that I will go with a popup.

Steve

1 Like