Introduction to Bubble Table Elements
In this Bubble tutorial video, I'm going to demonstrate the new Bubble table elements and how you can add alternating row colors to your table. But before I dive in, did you know that we've got even more videos on our website planetno-code.com. You'll find member exclusives, you cannot find them on YouTube.
Creating a Contact List Table
Right, let's look at how we add alternating rows into our table. So I've mocked up using the new table element a quick table here, it's a list of contacts, you might recognize some of the names and all I need to do is go into the designer and then click on the repeating row.
Accessing Row Index in Bubble
And right now Bubble doesn't actually allow you to access the row index in the row selector itself. So what you have to do is go into the cell and in the cell you can access the row's index.
Using Modulo for Alternating Rows
So I can say current row's index modulo, this is a way of dividing by 2 and checking for remainder which is basically a way of checking if the row is odd or even, an odd or even number. And so I can say is 0. So 2 divided by the current cell's row does that equal 0. So 2 divided by, yep you go, leaving a remainder or no remainder, basically that's what I was checking for.
Changing Background Style
And so then I can change the background style and then I can change the background color and I'm going to change it to some sort of really subtle gray and I'm going to test that just so I can see if it's clear. Okay, it's a bit more of a pinkish gray but that's fine, it illustrates it for this demonstration.
Applying the Condition to All Cells
And so then what I need to do is copy the condition here and paste it into every cell in the row. Let's preview that. And so there you go, that's how to add in alternating rows.
Future Feature Request for Bubble
And I, you know, the table element by Bubble has just been released and I really hope that one of the features they add is the ability to tap into the this row's index or current row's index in the conditional statement here. You can't do that.