Arranging groups horizontally

I have a diagram with several groups of nodes. The groups are different sizes and I want to arrange the groups horizontally, with a bit of space between each group, and in a particular order. Currently there are no links between nodes in different groups but there may be some added in the future.

Which layout makes the most sense to use in this scenario?

I would start with a GridLayout. Perhaps set wrappingWidth and wrappingColumn to Infinity. This is what Kanban does for its groups: Kanban Board

Then set spacing to whatever you like.

Ok, that works but I am running into an issue with the ordering. Initially, the 5 groups I currently have show up in order, let’s say A, B, C, D, E.

I have buttons set up so that you can view a single group. If you select a group to view, it will update the model to only include that one group. When you go back to the diagram with all of the groups, the last group you looked at individually will show up first in the order. For example, if you click the button to view only group C, then click the button to view all of the groups together, the order they are shown will have changed to C, A, B, D, E.

I checked the model data and the order in the array has not changed so I don’t understand why the order is changing in the diagram. Any idea?

It appears that the problem is caused by the fact that the model already contained one group, and when it was updated to include the four others, those four are ordered after the group that was already present. So far the only solution I found was to update the model to be completely empty and then update a second time to add all five of the groups at once.

Perhaps it would help if you specified a function to sort the nodes that GridLayout lays out: GridLayout | GoJS API