The Repeating Group in Bubble allows you to display a collection of data items from your Bubble database. You may have wanted to sort these items in a specific order.
In this Bubble tutorial, I'll show you how to sort the results in your repeating group. Here are a few examples of how you can configure a repeating group to create an alphabetical list of products, prices, or dates.
Server-side vs Client-side sorting
Bubble has two methods of sorting: Server-side sorting and client-side sorting.
Server-side sorting occurs before fetching the final list from Bubble, while client-side sorting occurs after bringing and downloading the list in the browser.
If you want to improve the performance and scalability of your Bubble app, you should prefer server-side sorting.
Sorting in the same table vs a different table
We can sort fields without using plugins in the same data type by specifying the order. To sort a list by another list or a field in another data type, we need to use plugins.
In this tutorial, we will be sorting on fields of the same data type, which is a common occurrence.
Database structure and Repeating Group
We'll fetch a list of users from our Bubble application.
All the users have a firstName and a Rank field. The Rank is a number that ranges between 1-4.
I've created a repeating group to display a list of users. In the repeating group, I'll show their names and their rank.
Sorting alphabetically (A-Z)
To alphabetise the list, we need to set the sorting parameter.
We do this in the same area where we set "Do a Search" constraints.
We need to choose the field we want to sort the list by in the Sort by dropdown. In our case, it will be the firstName.
We need to choose if the list needs to be sorted in a descending or ascending order. We want it in ascending order so that we can sort it A-Z. So the Descending value has to be no.
Sorting alphabetically (Z-A)
If, on the other hand, we want it in descending order so that we can sort it Z-A, the Descending value has to be yes.
Himanshu Sharma
Sorting by number (Low-High)
If you want to sort the results based on a number, say Rank, we need to change the 'Sort by' field.
The process of determining whether the Descending value has to be Yes or No is the same.
Sorting by number (High-Low)
If, on the other hand, we want it in descending order so that we can sort it 9-0, the Descending value has to be yes.
Himanshu Sharma
Editor - https://bubble.io/page?type=page&name=sorting_rg&id=nocodeassistant-tutorials&tab=tabs-1
Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/sorting_rg
If you need some help with your Bubble app or a team of Bubble developers to build a Bubble app for you, reach out to me at [email protected]. You can also follow me on Twitter.
Join the conversation.