In July 2023, Bubble introduced its new Table element. It may not seem like much, but it is a significant upgrade and makes our life way easier when it comes to building Tables in Bubble.io.
In short, this element's goal is to make building Tables in Bubble easier, faster and cleaner.
Before this element, we had to use a Repeating Group, and use a few workarounds to create clean title Headers and Table content. It did the job (and it still does) but it's more time time consuming.
However, it's important to note that the table element is still in its beta phase. While it brings several advanced features, it still lacks some functionalities. So you may sometimes encounter a few obstacles, but most of them will have workarounds.
In this tutorial, you'll learn all the basics needed to use Bubble.io table element.
Let's begin !
Understanding Table Elements in Bubble
When to Use Tables vs. Repeating Groups
As mentioned earlier, the go to way for building was by using a Repeating Group. Now that we have the Table element available, most of the time it'll be the best way to build Tables.
However, it might sometimes be more beneficial to use a Repeating Group instead. Both serve the purpose of displaying lists of data, but they have different strengths and ideal use cases.
Basically, you'll mainly want to use a Table element when presenting data in a "classic manner", where each row represent a record.
For example, this Table (built in Bubble) displays data with a pretty classic layout, so the Table element will be the recommended choice !
NB : If you want to access Pre-built Bubble.io Tables, make sure to check out components library.
However, for some uses cases you'll want to make more complex Tables with a more complex layout, such as this one :
As you can see, this Table has a nested Table in each cell used to display more details on the element. This type of layout is not possible with the Table element, so you'll have to use a Repeating Group.
Introduction to Bubble.io Table Element
In Bubble, the Table element is made of 3 main parts :
1. The Table itself
From there you'll set up the Data Source, conditions and the global style of your Table.
You can also choose the direction of your Table, following your needs.
2 - The Row 0 - this is the Header of Table (i.e where you'll most likely add your columns titles)
By selecting this static row, you'll be able to modify the Background Style of the whole Row, as well as make it stick to the top if you want it to.
Each row is made of cells, that you can also select and customize as you want to.
If you need it, you can add more static rows by selecting the Row 0.
3 - The Row 1 ∞ - this is the Row that will repeat itself indefinitely to display all your data.
By selecting this Row, you'll see a checkbox named "Set fixed number of repeating rows".
You will most likely need to uncheck this box, to make sure that this row repeats itself as main times as needed to display all your data.
Of course, you can also modify the background of the Row, and add conditionals to change the background color when it's hovered.
Finally, you can also add or remove columns by selecting a column :
How to Use Bubble.io Table Element
Populating the Table with Data
Alright, now that we covered the basics, let's give life to our Table !
First of all you'll obviously need to inject the right Data into this Table.
In my case, I'm going to inject a list of Contacts into this Table, nothing too crazy.
To access the Data Source settings of your Table, simply select the Table (not a row, not a column, but the Table) and go to the "Appearance" tab of its property panel.
There you'll be able to select the Type of Content you want to display, and the Data Source.
In my case I'm displaying a Data Type called "Contacts", and I'm making a search to fetch those contacts.
As can you can see, it works the same way as a Repeating Group, so you shouldn't be lost !
Now that your Data Source is set, you can start adding Text into your Table.
To do this, simply Drag and Drop a text elements into each cell of your Table and :
1. For the Header, simply type in the Title of your column
2. For the actual Data, use a dynamic expression to display the right data
And there you go, repeat the process and your Table will be filled in no time !
All we need to do now is to make sure that it is responsive, so that it can be seen on mobile as well.
How to make a bubble.io Table responsive
The most efficient and basic way to make a Table responsive is to allow users to horizontally scroll into it when the page gets too narrow.
This a topic we already covered for repeating groups (Bubble.io Horizontal Scroll in a Repeating Group - Easy 2 min guide (2024)), and we'll basically do the same thing for Tables.
The concept is that a Table becomes scrollable when the elements inside of it become wider than the Table itself.
So now that we know this, all we have to do is to set a Min Width on each of our Table's column.
This way when the page gets too narrow, the Table's content will become too wide which will lead to our Table becoming scrollable (and responsive).
Now you might wonder what Min Width you should apply on your columns ? It depends on the content of your column, you'll have to adapt to how large your content is gonna (for example, an Email will usually be wider than an Amount)
Repeat this step for each column, and you'll be good to go !
Paginating a Bubble.io Table element
As we mentioned earlier, bubble's table element is still in beta, and is lacking a few important functionalities.
Turns out pagination is one of them...
Fortunately there is a workaround for this and we wrote a tutorial for this, so if you want to paginate your Table, make sure to read it : How to add a pagination feature to a Table Element in Bubble ?
