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.
The best way to learn Bubble.io?
Start building with total confidence
No more delays. With 30+ hours of expert content, you’ll have the insights needed to build effectively.
Find every solution in one place
No more searching across platforms for tutorials. Our bundle has everything you need, with 500+ videos covering every feature and technique.
Dive deep into every detail
Get beyond the basics with comprehensive, in-depth courses & no code tutorials that empower you to create a feature-rich, professional app.

Frequently Asked Questions
Find answers to common questions about our courses, tutorials & content.
No. Our Beginner Essentials course and AI No-Code Coach are designed for total newcomers. You’ll learn Bubble.io step by step - no coding required.
Simply type your question in plain English, and our AI taps into the entire video library to recommend the exact lessons you need. It’s like having a personal instructor on demand.
As long as you’re subscribed! With our monthly subscription, you get unlimited access to all 500+ videos, our growing course library, and the AI No-Code Coach.
Your subscription includes:
- Bubble Beginner Essentials – Get up and running fast.
- Build a ChatGPT Clone – Integrate AI into your no-code apps.
- Build Your SaaS Website with AI – Learn to create a scalable startup site.
Plus, new tutorials every week!
The AI No-Code Coach is your first stop for instant answers. If you need deeper help, you can book 1:1 Bubble coaching for expert guidance.
Yes! If you don’t see real progress within 14 days, let us know, and we’ll issue a full refund—no questions asked.
Absolutely. Your subscription is month-to-month, and you can cancel anytime—no lock-ins, no hidden fees.
Absolutely. Your subscription is month-to-month, and you can cancel anytime—no lock-ins, no hidden fees.
If you’re serious about building a successful SaaS startup, check out Mastery—our intensive mentorship program. Mastery goes beyond Bubble.io development and includes:
- 1:1 mentorship to fast-track your progress
- Marketing strategies tailored for no-code founders
- Product management insights to scale your startup
- Personalized support from experienced founders