Bubble Table Element: Quick Guide
In this Bubble tutorial we demonstrate Bubble.io's latest element. Bubble has finally added a table element to their web app designer. Here is our quick guide exploring the Bubble table element.
Unlock the power of tables: Create stunning data displays in minutes with Bubble's new table element!
Master table customization: Learn how to add hover effects, adjust row heights, and implement alternating row colors like a pro!
Transform your Bubble app: Discover the game-changing features of the highly-requested table element and take your data visualization to the next level.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.