📖Adding responsive data tables to your Bubble app- Issue #24

Hi there,

Hope you’ve had a great week!

Today’s NoCodeSaaS newsletter is a quick edition focused on adding responsive data tables to your Bubble app.

Before the responsive editor, adding data tables to a bubble app was a bit of a nightmare.

Getting headers to line up with content, making them work on every device and making everything lineup in a repeating group could be tricky.

Thankfully - with the new responsive engine tables are a breeze to make and customize.

In this edition, I’m going to be showing how you can customize a table using a repeating group to show any kind of data to your users.

For my example, I’m going to use Neil Pierce’s new Atomic Fusion UI kit for Bubble - its a great collection of pre-built responsive components you can drop right into your app.

Here’s a preview video of how the finished responsive table looks…

🏃‍♂️ If you want to jump ahead and get a ready to use table…

Install the Atomic Fusion plugin and add the Order Table / Form component to a new responsive page and start customizing.

In the following steps we are going to cover how to create a form from screath.

Add a ready made responsive table from Atomic Fusion

Build a responsive table from scratch

The first thing we want to do on our blank responsive page is to add a new repeating group element.

Your page should be set up as having a column layout. Our repeating group should also be a column.

We want to set the repeating group to have no minimum or max-width for this example, and we want it to have a min-height of 100 px, with fit height to content enabled.

We want to add 40px padding on the left and right of the repeating group to give it some space.

Add your repeating group to the page and add a group inside it

Next, we want to create a group element inside the repeating group itself.

This should be set to the same layout controls as before, with no min or max widths.

Add a group element inside your repeating group

Then within that group, we want to add a series of texts for each of our columns. Each text should be the column name, ideally in bold.

To start with, we want all our text headers to have no min or max widths, and 20px of margin on the left and right.

Add a series of texts with no min or max widths to your group.

As this group we’ve just created is going to be our table header, we only want to show it for the top row of items.

To do this, we need to make sure the element is not visible on page load, and collapsed when hidden.

We then add a conditional rule to show when current cell’s index is 1

This means our table headers will only ever show at the top of our table.

Add a coinditional rule to only show the headers at the top of the table

Once we’ve got our table headers all set up, we need to copy this entire group.

Paste it and make sure your pasted version is directly below your original header. You should now give it a sensible name like Group Values and remove the contitional rule to only show in the first column.

You can now go and inject the data you want to appear in each column of your repeating group.

Note: You may need to set your groups type to the same thing as your repeating group row data to easily inject data.

You will probably also want to remove the bold styling from the font.

At a basic level, you now have a fully responsive table ready to go!

By default each of your columns will be of an equal size.

If you want to customize the widths of some columns - perhaps you have a column that only shows a small value like a price for example.

To do this, you can apply either a min-width or max-width value to the value. Be careful though, you need to apply the exact same rules to the column header as you do to the value itself, to ensure they both respond in the same way as the page is stretched.

You can also use this same technique to add all sorts of other information to your table, such as images and buttons.

Just ensure the responsive rules for each element exactly match those of the column title!

That's it for this week!

I hope you found this week’s issue helpful. Tables are one of the most noticeable improvements when building with the new Bubble responsive engine - so have some fun and experiment with creating some new tables for your app.

Drop me a reply if there’s another topic you’d like me to cover or if you have any feedback.

Thanks for reading and happy building!

James