Bubble Table Element: Quick Guide

Introduction to the Bubble Table Element

It's finally here. One of the most requested ideas on the Bubble Ideas Board. The table element has arrived and I'm going to demo it to you right now. So I've got my app here and the data that I'm going to be displaying is my contact data, which you can see here in my Bubble database. And this is so quick, easy. You can tell that they've really put a lot of thought into how this element works.

Adding a Table to Your Page

So I'm going to add a table to my page. And then much like a repeating group, so much of this is like using groups and repeating groups, but the layout is in the table. And so it's just going to help you align all of those columns. So we're going to go contacts. We're going to say do a search for all contacts. And then there's two main ways, as well as the alignments of the rows and columns that this is different to repeating group.

Static and Recurring Rows

One is that we have this like a static row and then we've got what Bubble are calling like infinite rows, recurring rows. And so in this static row, I will put a text label and I'll say first name. And much like a group, we've got all of the alignment options here. And then I'm going to copy that into there and this time write last name. And I think I have a field called country.

Creating the Header

Okay, so that's my header, done. I can then paste into my basically first cell of the repeating group, but it's the Bubble table element. And so this is where I make it dynamic. And so I'll say current rows, contacts, first name. And this time I'm going to say 100% width. This rows contacts, last name. This rows contacts, country.

Customizing the Table

Now of course, like you could in a group on the page, you could put an image in here, you could put icons, you could have them displayed conditionally based on the fields in this case in contact. Let's preview it. And then I'm going to discuss a few things that I think I hope they've got in the pipeline and would really help things along.

Adjusting Row Height

So one thing, a little bit like how when you're using a repeating group, for some reason there's a default height set. So we can clear that out by clicking the cell. In fact, click in the, where is it? Layout, click in the row. Layout, there we go. So I'm selecting the repeating row and the min height, and I'm going to say fit height content, and then get rid of the min height. And then on here, I'm going to also say fit height content, and get rid of the min height. And then you could apply some padding in there, but I just wanted to get rid of all of the unnecessary space. And you can see there that my table is all together.

Adding Hover Effects

Now, something that I've noticed, based on the conditional statements, is that we can add in a when this row is hovered. And so if I make the, the standard color white, I can say that this row is hovered, and then I can change the background color, make it a nice F2, F2 gray. Let's preview that. Okay, we've got that nice effect.

Limitations and Workarounds

Now, what I hope they add in, is there's no row index value. And so if you're wanting to add in that really cool table that where your rows alternate colors, then I'm not finding a way to do that right now. I will just have a quick check. Can you refer to current rows? Ah, current rows index. You can access it there, but you can't access it here. So I really hope that they add in the ability to get this rows index in.

Creating Alternating Row Colors

I mean, one workaround you could possibly do is, if each of your cells, so for example, if I wrap this in another group, I can then say this current rows index, modulo two is zero. So basically finding is it odd or is it even? I can then change the background color. I'm going to just make it stand out by making it a red. You get the idea. We should now see, yeah, so it's going to be all of the even numbers are going to have a red background. Then you can apply that in each of your columns.

Future Improvements

So that's one way, but it would be really helpful if they could set it universally when you select the row, if you can do it conditionally in here. Now, hopefully this is just the start of. What I would love to see is the ability to click on a header and for it to sort by name. Hopefully they would expand upon just being able to sort alphabetically. We obviously would love to have to sort data and all other data types in Bubble.

Conclusion

If we can rearrange table by clicking on the header, that's going to be great. But I feel like, yeah, most of voted idea on the Bubble ideas board. We've seen this previewed and sort of hints that many times on Twitter over recent months. And finally it's here. So please leave a comment below if you're excited about the Bubble table element, if you've got any questions. And do remember that we've got over 100 Bubble tutorial videos. Some which you can't find anywhere else available on our website, PlanetNoCode.com.