Dynamic number of columns in a repeating group

delache.gautier · 2020-06-01T14:36:27.792Z

Hey everyone!
This is my first question here. I hope I’m doing things right, if I’m not, please tell me and I’ll do my best to fix it

Basically, I’m trying to adjust the repeating group columns regarding of the number of elements that are ranked in that number.

Because a picture is worth a thousand words (from a non-native English speaker) :

This is what the dashboard in duolingo looks like. Some rows have three elements, some have two, some have one.

duolingo-inspiration-dashboard

Where I am :
→ I have a data type called “Program”. Each program has a name, picture, and order associated (the rest is not relevant to the issue here).
→ I want, in the case where there are two/three items with the same order, to be able to divide the column.

I’ve searched and everything I’ve tried didn’t work out as I expected.
My last idea was using the group by option, but I can’t figure out how it’s working.

Thanks everyone for the time you’ll spend helping me,
Gautier

anders.eidergard1 · 2020-06-01T14:58:59.241Z

One potential way to go would be to have two repeating groups.

Add a vertical repeating group, inside that repeating group add a horizontal repeating group.

You do need to keep track of both row and column in your data.
Amend your “Program” thing with e.g. Column and Row and use those to show only items for the specific row in your horizontal repeating group.
Hope that helps.

delache.gautier · 2020-06-01T20:00:37.672Z

Thank you for your quick answer.

Basically, what you are saying is :

A RG inside a RG
Change “Program” and instead of “order”, use row and column ?

So, how can I pick only the distinct elements that have the same row to fill the vertical RG ? Because I can see how to fill the horizontal one (Do a search of Programs and add the constraint of “where row = current cell’s program’s row”).
But how can I ensure that I’m selecting only the first one that has the same row?

The only idea I have is to add a constraint “column = 1”. But I think your idea was actually much more simpler. I have the feeling of going super far ! haha

Thanks!
Gautier

delache.gautier · 2020-06-02T10:08:14.530Z

I finally figured it out!
If someone comes across that topic in the future :

Parent Repeating group : load the programs, and add the constraint “column = 1” so that you load only the first elements of each column
Child Repeating group : load the programs, and add the constraint “row = Current Cell’s Program’s row”.

It’s working but it’s so not optimized. I’m loading a full program in a cell just to use its row. If anyone has an idea…

Thanks!
Gautier

anders.eidergard1 · 2020-06-03T15:01:31.375Z

One way I’ve used before when trying to make things faster is to load the entire thing once, put that result into a Custom State and then let the repeating groups show that custom state object with :filter applied as appropriate.

Doing lots of database reads tend to take a lot of time.

Chakor · 2022-04-28T14:52:32.678Z

Hey @delache.gautier

We know your post is 2 years old. But here’s a solution to this problem. Hope this is helpful for the future !

Dynamic columns in a repeating group Implemented

Hellow Bubblers ! Previously most bubble developers have been using multiple repeating groups with different columns and showing/hiding them according to conditions. We have discovered that with the new responsive engine, it is possible to create dynamic columns. For those who still haven’t found a solution, we hope this post is helpful. Place a repeating group using the new responsive engine. Set a fixed number of rows to 1 Uncheck fixed number of columns, and set its minimum width according…

beccijanereid · 2023-03-08T03:35:45.616Z

What if the table needs a header? How do you lock the scrolling so the whole table scrolls, and not just that row?