Table 3

⚠️ This documentation is shared for all Tables components without workflows. Some screenshots may not be fully identical to the components you chose to use but the technics will be the same.

Table 1 Component - Nocodable Component

Introduction

The table 1 component is a basic Table that you can use to display pretty much any data within your app.

In this documentation, we are going to display a list of Contacts, which is a Data Type created in our test app.

Obviously, you can tie and display any Data Type into this Table.

How to tie this Table to your app's data

1 - Set your Table's Content Type

The first step to add your own Data into the Table 1 is to set it's Content Type.

In Bubble, the Content Type defines the Type of Data you are sending into this elements.

Most of the time it will be a Data Type created in your app, but it can also be a text, number of even an option set.

In my example, I want to display a list of Contacts into my Table, which is a Data Type created in my app.

Therefore, I'm going to set "Contacts" as the Type of Content for my Table 1.

For example, if you're displaying a list of Users, you can set your table's type of content to "Users".

Once this step is done, you can go to the next one.

When changing the Content Type, you will probably see a few issues appear. It's perfectly fine, they will disappear when the right data will be tied.

2 - Set your Table's Data Source

Now that we've set the its Content Type, our Table knows what kind of data it is supposed to be receiving.

But it doesn't yet knows where to find this data.

This is why we are going to need to fill in the "Data Source" of our Table.

Most of the time you are going to use a "Do a search for" to populate this Table, but you can use any other data source, as long as it returns a list with of the same Data Type as your Content Type.

Depending on your Use Case, you will probably need to add additional constraints to your search to only return the right data.

3 - Link text elements to your data

Alright, our Table's data is now set and our Table should be populated with the right data.

All we need to do know is go through each text elements within the Table and link the correct data to it.

This way, each element will know what information to display.

To do this, simply select the various text elements that are the Row "1 ∞" and add a dynamic data with the corresponding information to display.

Here I am selecting the text in the "Name" column and making it display the First Name of each contact

And there you go, now you simply need to repeat this step for the other columns :

Here I am selecting the text in the "Title" column and making it display the Job Title of each contact

How to add columns

If you want you can add additional columns to this Table pretty easily.

All you need to do is hover the Right Hand side of the Table, and you will see a "+" appear at the top of the Table.

Simply click on it to make a new column appear.

How to remove a column

If you want to remove a column from this Table you can simply click on the Column's letter and click the "X" that appeared on top of it.

Responsiveness

Now comes an important part, which is to make sure that this Table stays responsive.

By default, this Table is responsive.

When the screen gets too narrow to display all the Table's content, it will allow the users to horizontally scroll into it, which is common and efficient way to make a Table responsive.

However, if you add one or more new columns into this Table, you need to make to you set a proper min width on them.

Why ? Because that's what enables the Table to become horizontally scrollable when needed.

So make sure that each columns has a proper min width set, like below :

If you're wondering what value your Min Width should be, it depends on the content displayed into the columns.

The larger the content can be, the larger the Min Width should be.

If your columns display an email, a Min Width of 180px should do the job. If your columns displays a simple icon, 30px will do.

It should be wide enough to contain the information displayed.