How to add navigate a table with the arrow keys (Up Down Enter)

Navigating Tables with Arrow Keys in Bubble

In this Bubble tutorial video, I'm going to show you how you can use the arrow keys to navigate up and down records in a repeating group. I wanted to record this video showing the new Bubble table element. However, that hasn't quite got the right data sources linking them into your workflows to make that possible. So this is using a repeating group and I can navigate up and down with my arrow keys and if I want to view Peter's record I navigate to Peter and I hit enter on my keyboard and I'm taken to Peter's page.

Planet No Code Membership Offer

Now before I launch into it, did you know that we have got the website PlanetNoCode.com where you can find Bubble tutorial videos that you cannot find on YouTube? We've got a fantastic membership offer going on right now, so head to PlanetNoCode.com. But back to the tutorial, let me show you how I've built this.

Setting Up Keyboard Shortcuts

So I have been using the air keyboard shortcuts by ZeroCode and I've got three of them on my page. That's because I've got one for enter. In fact, let me relabel this - this is enter, and then I've got two: I've got one for down and I've got one for up.

Implementing Workflows

For my workflows, let's go for up first. I have a custom state on the page and that is going to store an index value for the row that would currently have highlighted. Let me show you on the page: I've created a custom state called selected row and it's number and the default is one.

Visual Feedback for Selected Row

Then on my in my repeating group, I have a conditional statement saying when current cell's index (for example, this is cell one) is my custom state's selected row, I change the background color. That's how I give the visual feedback to the user of which row is selected.

Handling Up and Down Navigation

So when I hit up, all I need to do is take the custom state selected row and minus one. When I hit down, all I need to do is the custom state selected row plus one.

Challenge: Preventing Negative Index

Now you may have spotted something that I missed here, and if you have a solution leave it down in the comments. But I'll give you a hint: what happens if the custom state selected row is one and you minus one from one? You get zero. How would you prevent that? If you've got an idea how to do that, leave a comment below. I have an idea but I thought I'd leave you with a little challenge.

Handling Enter Key Press

And then enter - what happens when the user presses the enter key? This is the bit that can't currently be done with the Bubble table element. They just haven't got the ability to list through the entries of a table element; that's just not built in yet.

Selecting and Navigating to Specific Records

So this is my repeating group list of contacts and then I select item number and I match the number up to the custom state selected row. And so that way if the user has started on one and they've hit the down arrow, it's one plus one so they go to two. That updates our contact selected row to two and so this is then saying go to the second item in the repeating group and that's how I send them through to the page.

Conclusion

There you have it. That is how to add some handy keyboard shortcuts to a repeating group that you're presenting as a table so you can use the up and down and enter keys to help your users navigate around your app.