Bubble.io tutorials

Bubble.io Bulk Selection in a Table - Easy 2 min guide (2024)

July 12, 2024
bubble ui kit nocodablebubble ui kit nocodable

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 :

bubble.io table selection

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.

bubble.io select items in a table

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 :

bubble.io checkbox selection

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 :

bubble.io select items in a table

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 :

bubble.io select items in a table

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 :

bubble.io checkbox selection feature in table Select an Image

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 !

Ship your project in days, not weeks.

The most complete and diverse components library for Bubble. All you need to build on Bubble, faster then ever.
Start building
No credit card required

Latest Articles