Making Horizontal Scrolling Tables is a must have skill in Bubble.
Whether you're a beginner or an intermediate Bubble.io developer, mastering this technique can significantly improve the user experience of your app.
Especially because it's the best way to easily make a Table responsive.
This tutorial will guide you step-by-step on how to implement an horizontal scroll in a repeating group, ensuring your application stands out with seamless navigation and a modern UI.
Here's what we'll build in this tutorial :
Step 1 - Build your Repeating Group UI
The first step of this tutorial is of course to actually build your Repeating Group's UI.
You can apply this tutorial to pretty much any types of UI (Tables, Grids, Carousels etc...), but the thing to remember is that in this tutorial we will use a Repeating Group to create our Table.
We'll cover the Table elements in another tutorial.
To illustrate this tutorial, I'll be example this Table below from Nocodable Component's library :
As you can, see nothing too crazy. Simply as nice and neat Data Table.
But when the page gets too narrow, here's how it behaves :
As you can see, as soon as the screen gets too narrow my Tables starts overflowing and enable me to Horizontally Scroll into it. Which in turns enables me to view all the information displayed.
If you want to take a closer look to it, you can live preview this component here : Table 7 - Nocodable Components Preview
Now before going further, let's take a closer look at how it's built :
As you can see above, my Repeating Group is composed of two groups :
- The "Group HEADER" that contains the titles of my Table
- The "Group MAIN LINE" that contains all the information of the Current Row
For those wondering, the "Group HEADER" is hidden by default and only visible on the First Line of my Repeating Group using the conditional below :
Finally my "Group MAIN LINE" is simply composed of various Groups and Text Elements with a Row Layout.
Step 2 - Making it Scrollable
Alright now, let's dig into actually add an horizontal scroll to this Table.
a - What makes a Repeating Group Scrollable ?
First, we need to understand what makes a Repeating Group scroll horizontally ?
Basically, Repeating Groups in Bubble become scrollable when the content displayed inside of them starts overflowing (i.e is becoming wider than the repeating group).
Sounds easy, right ?
Well yes, it actually is.
Simply keep in mind that we do not want the Repeating Group to be wider than the page, we want the content inside of the repeating group to be wider than the page.
b - Actually making it Scrollable
Now that we know that, all we need to do is to let the Repeating Group stretch as much as it can and apply a Min Width to the Groups inside of the Repeating Group.
This way when the page will get too narrow, the Content inside of the Repeating Group will start overflowing due to is Min Width, which will make our Repeating Group Horizontally Scrollable.
Now, all you need to do is make sure that all the Groups that are placed directly under your Repeating Group have the same Min Width.
In my case, I need to make sure that the "Group HEADER" and the "Group MAIN LINE" both have a Min Width of 800px.
And obviously, 800px is an arbitrary value, you'll have to adapt it based on the content inside of your RG and how wide it is.
If you have a lot of information displayed, you might end up with a 1000px min width for example.
There you go ! You now know how to make an Horizontally Scrollable Repeating Group in Bubble 😎
