View profile

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

James from NoCodeSaaS
James from NoCodeSaaS
@jamesdevonport
Hi there,
Hope you’ve had a great week!
Today’s NoCodeSaaS newsletter is a quick edition focussed 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
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 geoup inside it
Add your repeating group to the page and add a geoup 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 elemenet inside your repeating group
Add a group elemenet 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.
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
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
Did you enjoy this issue? Yes No
James from NoCodeSaaS
James from NoCodeSaaS @jamesdevonport

If you're thinking about building a SaaS product using no-code or visual development tools - this newsletter is for you!

Every Friday I'll be sharing practical tips and advice on building a SaaS app using the Bubble.io platform.

From how to structure your database, to implementing 3rd party APIs, we'll touch on everything you need to know to get started and scale your app to thousands of users.

I'll be using my own Bubble app as an example. I'm currently building UserLoop.io - a Shopify App designed to help store owners automatically survey their customers and get more reviews.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.