Bubble table element - Sort by column
Here's one way you can customize the Bubble Table element. In this Bubble tutorial video we'll demonstrate how to create click to sort column headers.
Unlock Table Sorting Magic: Learn how to sort columns with just a click in Bubble's new table element!
Master Custom States: Discover how to use custom states for temporary data storage and dynamic sorting in Bubble.
Elevate Your UI Game: Create professional-looking interfaces with Bubble's table element and custom sorting functionality.
Introduction to Bubble Table Element
The Bubble table element was released only a few days ago and it's already made building UI interfaces like this so quick and easy. In this Bubble tutorial video, I'm going to show you how to sort a column based on the little arrows that you get in the column header. But before I launch into that, did you know that we've got over 100, over 150 in fact the Bubble tutorial videos available now, many of which are member exclusives and can only be found at PlanetNoCode.com.
Adding Sort Icon to Table Header
But let's go and add this icon in. So, in my cell here, I'm going to add in an icon. And say arrow, no I think up, I know exactly what I'm looking for. There we go, it's called sort. It's looking for the sort icon. I'm just going to get rid of the roundness here, there's no border on it. I'm going to make that a bit bigger too. Just for demo purposes, make it, there we go, that big.
Setting Up Custom State for Sorting
So, I want to be able to sort in alphabetical order by first name when this button is clicked. So, I'm going to use a custom state to do this. So, I'm adding a custom state to my page. Custom states can be added to any elements on the page and they're aware of temporarily storing data. If the user refreshes the page, custom states are lost. So, it's not saved into the database but it is a little bit quicker and it's useful for temporarily storing data.
Creating the Custom State
We click add a new custom state and I'm going to call this column index and I'm going to make it a number. And so, when this button is clicked, so I add the workflow, when it's clicked the icon, I'm going to set state of my page, find my column index state and then you can see that I get current, oh no, okay.
Bubble's Ongoing Development
So, Bubble is actively developing the table element. Like I say, it's fresh, it's new. This column, now I can get the table. Okay, I was hoping to be able to get this column's index. It looks like I can't. So, there's not a dynamic way of doing this anyway, so I am just going to put in one.
Setting Up Conditional Sorting
And that then means that if I go onto my table, we can see at the moment, I don't have a sort by. So, it's going to sort them, I think by date created, whatever the default is. But I can go onto conditional and let me build it from scratch for you here and say when my custom state column index is one, I'm going to update the data source. So, what I put in here is going to overwrite what's written in here.
Configuring Sort Order
So, I'm going to say, do a search for contacts and then this time first name sort by descending. That's useful if you're using dates and you want dates to appear backwards, but with alphabetical order, I don't want it descending, I want it ascending. So, then click close and then I want to show a little bit of visual feedback here. So, when a table index is one, I'm going to change the icon to that one.
Previewing the Sorting Functionality
Let's preview that. So, you can see that these are out of alphabetical order. One that should obviously be coming at the bottom and I'm going to click on here. And you can see it changes the column and changes the rows so that they are now sorted by in alphabetical order.
Conclusion
So, that's how you do it. That is how you can sort your table elements columns by alphabetical order.
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.