Table 6
⚠️ This documentation is shared with Table 4 components. Therefore the screenshots you will see will not be identical to the Table 6 components, but the system stays the same.
Introduction
The table 6 component is a Table you can use to display pretty much any data within your app. It comes pre-built with a Bulk Selection system that allows you to select one or several Rows.
If you want to follow a full-length tutorial dedicated to building Bulk Select System in Bubble you can check out this tutorial on our website : https://www.nocodable-components.com/post/bubble-io-bulk-selection-in-a-table
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 after this tutorial is finished.
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.
And there you go, now you simply need to repeat this step for the other columns :
How to use the List Selection System
Alright, now comes the interesting part : setting and using the Bulk Selection System in our Table.
If you want, we released a full length tutorial on this subject : https://www.nocodable-components.com/post/bubble-io-bulk-selection-in-a-table
as well as a YouTube video : https://www.youtube.com/watch?v=Nutd-PcaYi0
This system basically works with three main elements :
A custom state that stores the Items that are selected
Some workflows that select or unselect an item when the checkbox is clicked
A conditional that changes the checkbox appearance when an item is selected
Therefore, we need to update those 3 elements to make sure that they correspond to your app's setup.
1 - Updating the Custom State
As said previously, this custom state is used to store the List of Items that have been selected.
Basically, when a User select an item from your Table, our workflows will add it to this custom state or remove it if it was already selected.
So what we need to do with it is to make sure that this Custom State's Type of Content is set to the same Content Type as your Table.
To update it, click on your Table and find the "ℹ️" icon at the Top Right Corner of your Table's Appearance Panel.
Now you should see the Custom State's panel.
All you need to do it set the Content Type of the Custom State to the same Data Type as your Table.
In my case my Table displays a list of "Contacts" so I will set my Custom State to "Contacts"
As you might have seen, all issues that appeared when modifying the Table's data Type now have disappeared. So the system is now fully functional.
2 - Workflows
Now that our Custom State is updated and ready to receive our list of Items, we can take a look at the workflows that are making this system work.
We have 2 workflows :
1 - The first one is responsible for adding Items to our Custom State
This workflow is triggered only when the Current Rows's Item (i.e the item the user clicks on) is not already selected.
Which is why we're using a condition on this workflow :
Now that our workflow is triggered only when needed, we can use a "Set State of an Element" action to update the value of our custom state, and add our items to the list.
To do this, all we need to do is to fetch the value of our Custom State (i.e our list of items) and add this new item :
2 - The second one is responsible for removing items from our Custom State
Now that we're able to add Items to our list of Select Items, we need to be able to remove them from this list (i.e to unselect them).
To do this, we can duplicate the first workflow we created and "reverse" its condition.
Now this workflow will only trigger when the Items is already selected (i.e when it is present into the list of our custom state).
And now, instead of adding this item to the list, we can simply remove it by using the ":minus item" operator.
3 - Conditionals
Now that we have all the basics set for our system to properly work, we need to make sure that the changes we make are reflected by the Front-End of our app.
Basically, we want our checkbox to go from empty to checked when a Item gets selected, and vice-versa.
To do this, all we need to do is to add a conditional to our Checkbox like the one below :
Basically this conditonal simply checks if the Items from the Current Row is present into our Custom State.
If it present into it, then it means that it has been selected, and therefore we can modify its appearance.
Note that we did not use Bubble's native checkbox elements to do this.
Instead we chose to use an Icon because it gives us more flexibility and design options.
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.
Last updated
