Here is a crude idea as i expect more simple and optimal way of doing it.
The idea is to create multiple single-column repeating groups(RG) and display a portion of the data in each RG.
So for n columns you will create n 1-column repeating groups. Since you want to make the heights of the columns equal(except the last column which may be less than the rest), you will have to dynamically calculate the height to determine the start and end of each column.
col1end = list:count / n
col2start = col1end + 1
col2end = col1end * 2
col3start = col2end + 1
col3end = col1end * 3
You can store these variables in a custom state.
For the repeating group’s data source which is the list of the elements you want to display, we will also store it in a custom state. The reason is that we dont want to make multiple calls to search our database. I might be wrong as i don’t know how bubble does things internally. Bubble is sometimes very smart and is able to group calls together. But in even similar database searches are done seperately we want to avoid that.
So we instead to the search once and store it in a custom state which is a list of the time of thing we want to display.
Then for the data source of each RG we call the custom state that is storing our list.
Lets say we stored the list in a custom state called rglist which is attached to the element Group A (we attach all the other custom states to this too), then below is how we will set up each columns RG.
Column1 : Group A’s rglist:items until Group A’s co1end
Column2 : Group A’s rglist:items from Group A’s col2start:items until Group A’s col2end
Column3 : Group A’s rglist:items from Group A’s col3start:items until Group A’s col3end
If your rows were static then you could have easily calculated and hardcoded these numbers. But this approach ensures that as your list increases the heights are adjusted accordingly.
Now the question is when do you set up all these custom states. That will depend on your design. If you have a page the displays your lists, then you can set up the custom states on page load. But this will mean you will have to refresh or reload this page to get the rows re-adjusted. Note that your list will be updated irrespective but all new items will be added to the column until you’ve refreshed this page.
To avoid this, you can create a custom state that stores the count of the list on page load and create a new custom event that is conditioned on when the current list count is differerent from the previous count. You can then use this custom event to create an action to recalculate the custom states for the start and end of each column.
Don’t be scared by this long discription, its actually simple when you implement.
Again i expect there to be a simple and optimal way of doing what you want, but this will work just that it’s a bit crude i think.