Pagination with the Bubble Table Element

Understanding the Bubble Table Element

The Bubble table element is still missing many of the key features we take for granted with repeating groups, particularly features that allow us to do pagination with tables just like this. Well this is my workaround for adding in pagination to tables in Bubble when you're using the Bubble table element. Let me show you exactly how I've got this set up.

Setting Up the Table Element

In my editor I have my table element and I have a do a search for contacts and then I say items from and then that is a custom state on my page which takes a number and I have the default set to one. So the start of this expression here is saying show items from number one and then I say items until three. Now three is relative to the number one that's inserted in this part here. So I'm basically saying show items one to three and that is why I have got three items showing on my table. So if I wanted to have five items showing on my table I would increase this to a five.

Exploring More Bubble Tutorials

But before I dive deeper into this, you're watching this video because you're learning Bubble and if you're learning Bubble you need to check out our website because you can find hundreds of Bubble tutorial videos that you can't find anywhere else not even on our YouTube channel you can only find them if you become a member at PlanetNoCode.com.

Implementing Pagination Workflows

Let me unpack a bit more of what is going on here. So when the next button is clicked I've got two workflows and so my next are marked with green and my previous is marked with purple because they're a little bit different. So let's start with with this one. So I'm saying that if I add three to the custom state which currently holds one so taking that up to four and four is less than my total number of contacts then I can just add three to my one. Okay but what happens when you get to the last page? Well that's where this one kicks in which enables me to loop background them. So I say that when my one plus three is more than my number of contacts so I had three contacts that doesn't work very well doesn't loop it's the same data but hopefully you know I mean then all I do is reset the start number to one. Okay that's how the next buttons work.

Implementing Previous Button Functionality

What about the previous buttons? So this one's the simplest one to start with. I say when my start number minus three is greater than zero I can just take three off my start number. Okay just go down by three entries but when my start number is minus three is... I've got the wrong way around. Start number minus three is greater than zero hopefully that's what I said. So then the other way around is when the start number minus three is less than or equal to zero then I just take it to one. Or effectively in this this mode I'm not doing a reverse loop although that would be possible I'm simply meaning that the previous button doesn't do anything so I could add in a similar expression to here in on my previous button and disable it.

Conclusion

But anyway long story short that enables me to go remember this is Bruce Pepper Wanda and then I go back to Bruce Pepper Wanda and if I'm on page three I can go back to Bruce and then the previous button doesn't do anything. So there you have it that's how you can add in pagination to tables. Hopefully Bubble will add in some of the additional pagination tools that are with repeating groups but hopefully they'll add that in to tables at some point soon.