A static list is good, but a sortable list is great. Giving users the power to sort data is a basic feature for a good user experience, and thankfully, Bubble makes it incredibly simple to implement.

In this tutorial, we'll walk through an efficient method for sorting a repeating group: using Custom States. You'll learn how to create buttons that allow users to instantly re-sort a list without reloading the page.

We'll build a classic example: a list of products that can be sorted by Name (A-Z) and by Price (High to Low).

How it works

Before we dive in, let's understand the three key components that work together to make this magic happen:

1. Custom state (The "Memory"): We'll create one to remember the user's current sorting choice (e.g., "sort by name" or "sort by price").
2. Buttons (The "Trigger"): These are the controls for your user. When a user clicks a "Sort by Price" button, its only job is to update the value on our custom state.
3. Repeating Group (The "Display"): The repeating group will be set up to constantly watch that custom state. It will have a default sort order, but it will also have conditional rules. When it sees the custom state's value change, it will automatically apply a different sorting rule to its data source.

This "State -> Trigger -> Display" pattern is a cornerstone of building dynamic, responsive apps in Bubble.

Prerequisites

For this guide, I'll assume you have a Data Type called Product in your database with at least two fields:

• Name (Type: Text)
• Price (Type: Number)

Make sure you've added a few sample products to your database so you have data to see.

Step 1: Create the custom state

First, we need a place to store our sorting choices. The page itself is the perfect container for this.

1. In the Bubble editor, open the page containing your repeating group. Click on the page itself (the top-level element in the Elements tree, e.g., products_page).

2. In the Element Inspector window that appears, click the small "i" icon at the top right to open the Element States dialog.

3. Click "Add a new custom state".

4. A popup will appear. Let's configure our state:

   • State name: sort_by (using lowercase and underscores is good practice).
   • State type: text (since we'll be storing words like "name" and "price").
   • Default value: name (This sets the initial sort order when the page first loads).

5. Click Create. You've now created the "memory" for your page!

   

Step 2: Set up the buttons and workflows

Now, let's give the user a way to change that custom state.

1. Drag two Button elements onto your page from the element palette.

2. Label them clearly: "Sort by Name" and "Sort by Price".

3. Configure the "Sort by Name" button:

   • Right-click the button and choose "Start/Edit workflow".

   • In the Workflow Editor, click the box to add a new action.

   • Navigate to: Element Actions -> Set state.

   • Configure the action:

     • Element: Choose your page (products_page).
     • Custom state: Select the sort_by state we just created.
     • Value: Type in name. This text must exactly match what we will check for in the next step.

4. Configure the "Sort by Price" button:

   • Go back to the Design tab. Right-click the "Sort by Price" button and start a workflow.

   • Add the same Set state action.

   • Configure it for price:

     • Element: products_page
     • Custom state: sort_by
     • Value: Type in price.

   

Step 3: Configure the repeating group

This is where it all comes together. We'll tell the repeating group to change its data source based on our sort_by custom state.

1. Select your Repeating Group on the page.

2. Go to the Appearance tab in the Element Inspector.

3. Set the Default Data Source: This is the sort order that will apply when the page first loads, matching our custom state's default value.

   • In the Data source field, click Do a search for.
   • Type: Product
   • Click the Add a new sort field button (or Sort by dropdown).
   • Sort by: Name
   • Descending: "no" (this ensures A-Z sorting).

4. Set the Conditional Data Source: Now we'll add the rule for sorting by price.

   • Switch to the Conditional tab for the repeating group.

   • Click "+ Define another condition".

   • Set up the condition:

     • When: products_page's sort_by is price

   • Now, define what happens when that condition is true:

     • Select a property to change when true: In the dropdown, choose Data source.

     • A new data source box will appear. Click it and set up the search for this specific condition:

       • Do a search for
       • Type: Product
       • Sort by: Price
       • Descending: "yes" (this will sort from the highest price to the lowest).

The result

That's it! Click Preview in the top right of your editor. Your page will load with the products sorted alphabetically by name.

Click the "Sort by Price" button. Voila! The repeating group will instantly re-render, this time with the most expensive products at the top. Click "Sort by Name" again, and it will snap back. No reloads, just pure, fast, dynamic sorting.

Why this method is best

• Performance: The sorting is done on Bubble's server (Do a search for...), which is highly optimised. The browser only receives the already-sorted data, making it incredibly fast and scalable, even for thousands of records.
• User experience: It's instantaneous. There's no jarring page reload, which creates a modern, professional feel for your app.
• Flexibility: This pattern is the key to unlocking all sorts of dynamic interfaces in Bubble, from filtering to search and beyond.

ABOUT ME

I'm Juliet Edjere, a no-code professional focused on automation, product development, and building scalable solutions with no coding knowledge.

I document all aspects of MVP validation, including how designs, data, and market trends intersect.

Click. Build. Launch.

Visit my website → built with Carrd and designed in Figma