Repeating groups

This section covers the container type repeating group, used to display lists of things such as records from the database

The repeating group is a container type used to show a list of things such as records from the database by repeating the content of the group one time for each entry.

To show a list of things, you can also use the table element. You can read more about the table element and how it's different from a repeating group in the article below:

Article: Article section:

We explored in the earlier that you can and allow its child elements to reference that data. Repeating groups work much in the same way, except that they are set up to work with a list of data rather than a single record.

For example, let's say you want to display a list of users in your app and include information like their name and email address. By adding text elements to a repeating group showing that information, the content of the group will be duplicated for as many users are in the list. If the list contains five users, every element that you add to the Repeating Group will be repeated five times.

Let's explore a few different ways in which you can use repeating groups to set up flexible lists of data in creative ways:

List design

In the example below there are some key things to note about how repeating groups work:

We have set the Type of content to User, meaning the repeating group will accept a list of users as its data source
In the Data Source we are using the Do a search for command to load a list of users
In the repeating group you can see that the text element inside is repeated once for each row. Each row is called a cell.
We can reference the user in each cell by including Current Cell's X in the expression. In the example below that makes it the Current Cell's User since our Type of content is set to user. From referencing the current user, we can fetch their first name.

Let's see how that would look in the live app:

Card design

As we saw in the previous example, repeating groups can be used to set up simple lists such as a list of contacts in a or products in a product inventory system.

But they can also be used in powerful ways to set up lists that are designed in other ways such as product cards:

From a database perspective, the products we are looking at would include fields for Name (text), Price (number), Image (image) and Description (text) that we can then load and display for each cell of the Repeating Group.

Masonry design

With Bubble's responsive engine, you can use Repeating Groups to set up a fully responsive masonry design.

Try our interactive tutorial below or scroll down for the text version.

To use the masonry design, you need to complete a few steps:

In the for the Repeating Group, make sure you have both Set fixed number of rows and Stretch rows to fill vertical space unchecked:

Set Scroll Direction of the Repeating Group to Vertical.
Check Display items as masonry grid

When the masonry grid settings have been set you can adjust the gap between each cell in pixels by changing the Row cell gap and Column cell gap settings.