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.

Bubble Table element pagination demo

Let me show you exactly how I've got this set up. 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 3. Now 3 is relative to the number 1 that's inserted in this part here. So I'm basically saying show items 1 to 3 and that is why I have got 3 items showing on my table. So if I wanted to have 5 items showing on my table, I would increase this to a 5.

Best way to learn Bubble

You're watching this video because you're learning Bubble and 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. Let me unpack a bit more of what is going on here. So when the next button is clicked, I've got two workflows.

Workflows

Pagination: Next button

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 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. But what happens when you get to the last page? that's where this one kicks in, which enables me to loop back around them. So I say that when my one plus three is more than my number of contacts, so I have three contacts, that doesn't work very well because it doesn't loop, it's the same data, but hopefully you know what I mean, then all I do is reset the start number to one. Okay, that's how the next buttons work.

Pagination: Previous button

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 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 on my previous button and disable it. But anyway, long story short, that enables me to go, remember this is Bruce Pepper Wonder, and then I go back to Bruce Pepper Wonder, 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 into tables at some point soon.