You've probably already seen a Bulk Selection feature on a Table.
You know, the little checkboxes that allow you to select multiple rows from a Table ?
This feature is a must-have for basically any app that displays data to its users.
With this, your users will be able to select multiple items and perform operations onto them (like Duplicating them or Deleting them for example).
In this article, i'm going to show you how to do just that in Bubble !
Step 1 - Build your Table
Obviously, the first step for this tutorial is to build your Table's UI.
I recommend using Bubble's Table element. Even though it's still in beta, it is very practical and helps a lot to build cool Table quite rapidly.
In my case, I'll be using the Table 6 Component from Nocodable Component's libary.
It comes with all the workflows pre-built, so if you don't want to spend time on building this from scratch, you should check it out !
Here's what I'll be working with :
As you can see, it's fairly simple Table displaying Invoices.
One important thing to note :
The checkboxes in this Table are not made using Bubble's native checkbox elements.
They are simply Icons element, because it gives us more flexibility. We'll come back to this later.
Now that you've built your Table's UI, you can go ahead and link it to your Data Source.
Step 2 - Storing our list of Selected Items
Alright, now that we've built our Table's UI, we can start working on the logic.
Basically, all we want to do is to keep track of the list of Invoices (or the Data Type of your choice) that have been selected by a User.
Put like this, it doesn't seem to difficult, right ?
Now that we know that, we need to find a way to store this list of Selected Items.
And the best way to do this, is to use a Custom State.
So let's go ahead and create a Custom State that will store a List of the Items that have been selected by our User.
If you want to learn more about custom states, make sure to check out our tutorial on this subject : Bubble.io custom states - All you need to know (2024)
You can add it wherever you want on your page, but in my case I'll attach it to my Table.
As mentioned in the screenshot, you need to make sure that this Custom State's Data Type is identical to your Table's data type.
For example, if your Table displays a list of "Blog Articles", you'll set your Custom State's date type to "Blog Articles".
Alright, now that we have our Custom State set up, we can jump onto the next step : building the workflows !
Step 3 - Building our Workflows
Before diving into the Workflow editor, let's decompose what we want our feature to do when the user clicks on a checkbox :
1 - If the Item is not already selected --> We want it to add this item to the list stored in our Custom State
2 - If the item is already selected --> We want to remove this item from the list stored in our Custom State
So, at a first glance, we are going to need two workflows !
Let's start with the first one.
Workflow 1 - Adding an item to our list
Alright, let's go ahead and add a new workflow to your Checkbox.
This workflow will be the one that will add Item to the list so as we said earlier, it should be triggered only when the Item of the row is not already selected.
So, said in a different manner : when our Custom State doesn't contain this item.
So let's add a conditional to our workflow :
With this condition set, we are now making sure that this workflow will execute only if this particular item is not already selected.
So let's continue to build our workflow so that it effectively adds the item to our Custom State :
To do this, we are going to use a "Set State of an Element" action to change the value of our Custom State.
And the value we are going to give this Custom State is it's Current Value + the Item we want to add.
This way, if the Custom State already contains Items, our workflow will simply add our Item to this list !
So, here's how it looks :
There we go, now this workflow will add new Items to our list of Selected items !
Workflow 2 - Removing an item from our list
Now that we can add items to our list, we obviously need to be able to remove them as well !
All we need to do here is to duplicate the workflow that adds an item, and simply "reverse" it.
We want it to trigger Only When the Item is already present into our Custom State's list and we don't want it to add, we want it to remove it !
So here's how our conditional will look :
As you can see the conditional changed from a "Doesn't contain" operator to a "Contains" operator.
And now, for our workflow :
bubble.io table selection Select an Image
As you can see here, the expression we're using so set the value of our Custom State has changed a little.
Instead of the ":plus item" operator, we're using the ":minus item", which effectively removes a single item from a list.
And that's it !
All we need to do know is add a simple conditional to our checkboxes to show when the Items is selected.
Step 4 - Changing our checkbox's appearance when an Item is selected
Final step in our tutorial : making the checkbox's appearance change when an Item is already selected.
Doing this is pretty straightforward, all you need to do is add this conditional to your checkbox icon :
Basically, this conditional simply watch if the Item of the line is present into our Custom State.
If it is, then it means that this Item is already select and therefore we need to reflect this change !
And there you go ! Your checkbox selection feature is now fully functional 😎
You can now use the list stored in our Custom State to perform operations, such as deleting it or modifying each item's status for example.
It'll be very convenient for your users !
