How to Implement Column-Specific Sorting in a Bubble Table?

Hi everyone,

I’m working on a project in Bubble and I’ve created a table with multiple columns, including SKU, Color, Size, Category, and Color Group. I would like to add a button above each column header that allows users to sort the table based on the selected column when clicked.

Here’s a summary of what I’m trying to achieve:

  1. Table Columns : SKU, Color, Size, Category, Color Group (and more columns).
  2. Functionality : Add a sorting button above each column header.
  3. Goal : Clicking the button should sort the table based on the respective column (e.g., sorting by SKU, by Color, etc.).

The table is connected to my database via the API connector and displays the correct data.

Could someone please guide me on how to implement this feature?

Please find attached screenshot of table for your reference.

Here I have to sort all columns except Photo and URL

Thank you!

1 Like

It is a little tedious with lots of fields but you can make a text custom state somewhere on your page, then since your data source is from an API response add :sorted after it and change Sort by to Change which field..., put the custom state as the Dynamic field name

Then for each column name set it up so when they click it sets the custom state to the exact field name that matches your API datatype.

So if the Order Number field name is order_number make sure you set the state exactly to that.

You can also add :filtered instead which handles sorting + dropdown/search filters for the data you retrieved

1 Like

Here is a video if that helps. :blush:

Welcome to the Bubble Community! :tada:

This topic was automatically closed after 70 days. New replies are no longer allowed.