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.