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.

Getting data ready for the Table Element

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 they've really put a lot of thought into how this element works.

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, and we're going to say do a search for all contacts. And then there's two main ways as well as the alignment of the rows and columns that this is different to repeating group.

Difference between Repeating Groups and Table Element

One is that we have a static row and then we've got what Bubble are calling 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. Okay, so that's my header. Done. I could 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 say current row's, contact first name. And this time I'm going to say 100 % width, this row's contacts last name, this row's contacts country.

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.

Styling the Table Element

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. No, 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 to content and then get rid of the min height. And then on here, I'm going to also say fit height to 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.

When row is hovered

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 standard color white, I can say that this row is hovered, and then I can change the background color, make it nice #f2f2f2 grey. Let's preview that. Okay, we got that nice effect.

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 look 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 row's 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 row's index in. 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 row's index, modulo 2 is zero. So basic 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. And 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. And then you can apply that in each of your columns. 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 starter.

What's next: Features I'd love to see

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 just being able to sort alphabetically. Obviously, we'd love to be able to sort date data and all other data types in Bubble. If we can rearrange the table by clicking on the header, that's going to be great.

But I feel like, yeah, most of that idea on the Bubble ideas board. We've seen this previewed and so hinted 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.