Creating reuseable, configurable repeating group tables

Creating tables using repeating groups in Bubble is a huge page in the ass, and the table element is an equal pain in the ass (for now). I wanted to share how I componentise configurable repeating group tables for datatypes using element properties. I’m no UI expert, I just like making efficient Bubble building techniques :slight_smile:

Example

I’m creating a client portal SaaS for productised services like my own. That means a lot of showing of requests. I want one table to show requests of a certain status, and another to show requests of another status. In addition, on one status the user should be able to create a new request using a reuseable popup, but not on the other. With my new reuseable repeating group, I just specify these requirements as RE properties and can use the same table in multiple places, so that any changes are reflected automatically and it avoids having to make multiple changes in multiple places if I adjust the UI or logic somewhere. To show or hide specific columns, or change the header text, I also use RE properties which is just a click of a button rather than playing around with conditionals all the time.

Create a reuseable group for your table

You’ll need one reuseable for each data type. You’ll need at least your Repeating Group, but also probably a header (used for title), and a footer (used for pagination).
CleanShot 2023-12-14 at 13.36.34@2x

Create a standard repeating group table. Add all of the columns that you could possible want to display (generally most of the fields in this data type). You’ll probably want a header cell that’s visible when Current cell’s index is 1.

CleanShot 2023-12-14 at 13.38.27@2x

Configure repeating group search

Create reuseable element properties for your repeating group search constraints where possible. For example, I’m searching for requests that have specific statuses, so I created a property that is a list of statuses. I use this property as the repeating group search constraint. Where this isn’t possible because of an unusual constraint, you can configure it directly in the repeating group without using properties.
CleanShot 2023-12-14 at 13.40.34@2x

Another approach here is to provide a list of search results as the RE property (so configuring the search directly outside the reuseable element) but I opted for using properties as there were lots of constant elements in my searches but only one constraint that changes.

Configure pagination

Decide how many results will be per page. I chose 10. Have a List of numbers toolbox element inside the reuseable element that generates a list of page numbers. Display the list of page numbers in the reuseable element footer and configure workflows that go to the right page when clicked etc. You can also add next/previous buttons if you choose.

I decided to conditionally show the footer only when the Repeating Group’s list of items > 10 (when there are more than one page) as I didn’t see much value in showing pagination if there’s not many items. Of course you may make a UI/UX case against this :wink:

Configure columns

Hide and collapse all columns. Create a property for each column which is a dynamic yes/no value. So, for example ‘createdByShown’. When this is set to yes, conditionally show the createdBy column (both the content and the header label that is only shown for the first cell).

Configure table header (the text above the table)

My example repeating group has a heading and subheading (in the image this is ‘To do list - All of your requests marked as in progress’). These are taken as dynamic values from reuseable element properties. Whether this is necessary for you depends on your use case.

Configure table header label (the text that describes each column)

Have a RE property ‘headerLabelShown’. When no, hide the header (the one that is only visible in the first cell of the repeating group).

If your user can take actions from your repeating group, for example, opening a popup, you can set this up within the reuseable element. I have a button that is also displayed depending on a reuseable element property that shows a popup that allows the user to create something.

Examples of where this might help

  • You can use one reusable element in both admin panels and user front-end so changes will be reflected in both.
  • You want to display different fields depending on the user’s location in your app / their user type
  • You want to conditionally allow the user to take certain actions from a repeating group without requiring a new repeating group entirely

That’s all :slight_smile:

8 Likes

I hope Bubble will keep on optimising and the page size will decrease :grinning:

3 Likes