Styling Repeating Groups with Dynamic Rows AND Columns

[lucas5]

Hi bubblers,

I’m trying to create a grid layout with dynamic rows and columns based on database items. Rows are Thing A, Columns are Thing B. Thing C has a value for Thing A and a value for Thing B. Each cell (row+column) has a checkbox which is checked if there is a Thing C with Thing A and Thing B.

Based on other forum posts I figured out how to do this:

Repeating group with dynamic columns and dynamic rows

Hi all, I can’t seem to figure out a way to create a repeating group or table that allows for dynamic columns and rows. What I am trying to achieve can be seen in the example diagram below. [image] So I have a data type called ‘activities’ and the data type ‘users’. All the activities would need to load dynamically as columns, and all the users would need to load dynamically as rows. The empty cells will allow me to input a grade for each user for each activity. This is replicating Google c…

Dynamic rows and columns in repeating group

Hello! I am creating a program that helps teachers divides students into working groups. We have 2 data types Users ( aka students ) Classroom Every classroom has a list of users connected to it. I would like to display the users in the classroom in a repeating group. But I need the rows and columns to be dynamic. The number of columns should be = to the number of students in a classroom divided by the number of rows ( the :count of the list of students connected to the classroom) The num…

Here’s a video of my current setup and the issue I’m having.

Problem: How do I ensure the columns (titles and values) all align given different title lengths and how do I prevent horizontal scrolling?

Thanks in advance!

[J805]

Hey @lucas5

Here you go: https://youtu.be/rMvOSUroUIs

The key is to make sure the column is in a group of its own. I did this in my own app where I am mimicking the Monday app to create my own with similar functionality. Hope that helps.

[lucas5]

Hi @J805

Thanks for the answer! I’m not sure I understand what is supposed to be in a group? The columns are generated based on database values so I don’t think I can group them individually beyond what I have already done (see screenshot below)

Please let me know!

[largeline]

Hi @lucas5,

I like your setup, and the idea of aligning columns dynamically is great. To keep columns and titles aligned without horizontal scrolling, you could try using fixed widths for the column groups or adjust the responsive settings in Bubble to handle varying lengths.

[J805]

Hey @lucas5

This is what I mean, you need to put this whole part into a repeating group. Does that make sense?

[lucas5]

@J805

ole part into a repeating group. Does that make sense?

Hi I get what you mean here but the title and the checkbox are in different repeating groups so they can’t be in the same group. Both rows AND columns are dynamically generated by repeating groups so there is a repeating group for each column inside each row.

Could you show the editor of your Monday app so I can understand what you did?

[J805]

Hey @lucas5

I can’t share that editor but maybe I can create a new app for you next week to show you how to do it.

[J805]

@lucas5 Here you go. Hope this helps!

Preview: https://testapp42wcleandb.bubbleapps.io/version-test/monday?debug_mode=true
Editor: https://bubble.io/page?name=monday&id=testapp42wcleandb&tab=Design&type=page