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, I'm going to show you how to sort a column based on the little arrows that you get in the column header.

Sorting Rows Alphabetically in the Bubble Table Element

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. Let's look for the sort icon. Just going to get rid of the roundness here. There's no border on it. I'm going to make that bit bigger too. Just for demo purposes, make it that big. So I want to be able to sort in alphabetical order by first name when this button is clicked.

Using Custom States to Sort Rows

To accomplish this, I'm going to use a custom state. So I'm adding a custom state to my page. Custom states can be added to any elements on the page, and they're a way of temporarily storing data. If the user refreshes the page, custom states are lost. So it's not saving to the database, but it is a little bit quicker and it's useful for temporarily storing data.

Defining the Workflow and Setting the Column Index State

I 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 a 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 the current.... It's fresh, it's new. This column... Now I can get the table.

Sorting Rows in Alphabetical Order

Looks like I can't get this columns index. There's not a dynamic way of doing this anyway, so I am just going to put in one. And that then means that if I go on to my table, we can see at the moment I don't have a sort by. But I can go on to 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.

Formatting the Sorted Table

So what I put in here is going to overwrite what's written in here. So I'm going to do a search for contacts, and then this time, first name sort by the sending. That's useful if you're using dates and you want dates to appear backwards. But with alphabetical order, I don't want it the sending, I want it ascending. So then click Close.

Visual Feedback of the Sorted Table

Then, I want to show a bit of visual feedback here. So when table column index is one, I'm going to change the icon to that one. Let's preview that. So you can see that these are out of alphabetical order. Wanda 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 sorted, but in alphabetical order.

Conclusion

So that's how you do it. That is how you can sort your table elements columns by alphabetical order.