Bubble Table Element - Alternating Row Background Color
In this Bubble tutorial we demonstrate the new Bubble Table Element and show how you can easily add alternating row background colors to the Table Element in your Bubble app.
Unlock the power of alternating rows: Learn how to add eye-catching table designs in Bubble!
Master Bubble's new table element: Discover the secret to creating visually appealing repeating groups with alternating colors!
Transform your Bubble tables from boring to beautiful: See how easy it is to implement alternating row colors!
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
3 ways we support solopreneurs
Our team is here to help, with a combined 30+ years working for internet startips.
Learn Bubble
Explore our library of 300+ Bubble and no code tutorial videos. Watched by over 800k no coders on YouTube.
Bubble Coaching
Troubleshoot your Bubble app and build new no code features with our in house Bubble expert.
Mastery
Ready to take your SaaS idea to the next level? Join our exclusive Mastery program for personalised content & mentoring.