In this Bubble tutorial video, I'm going to demonstrate the new Bubble table elements and how you can add alternating row colours to your table.

But before I dive in, did you know that we've got even more videos? And on our website, planetnocode.com, you'll find member exclusive. You cannot find them on YouTube.

Using Conditional Statements for Alternating Row Colors in Bubble Tables

Let's look at how we add coordinating 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. 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 rows index. So I could say current rows index, modulo. This is a way of dividing by two and checking for a 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 zero Zero. So two divided by the current sales row does that equal zero? So two divided by... Yeah, you get it. Leaving a remainder or no remainder, basically that's what that's checking for.

And so then I can change the background style, and then I can change the background color. Now I'm going to change it to some really subtle gray. And I'm going to test that just so I can see if it's clear. And then I'm going to okay, it's a bit more of a pinkish grey, but that's fine. It illustrates it for this demonstration.

So then what I need to do is copy the condition here and paste it into every cell in the row. Let's paste to preview that. And so there you go. That's how to add in alternating rows.

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 this row's index or current row's index in a conditional statement here. You can't do that, but I've shown you the workaround adding a conditional statement to every cell.