How to add navigate a table with the arrow keys (Up Down Enter)
In this Bubble tutorial video we demonstrate how to use the arrow keys to navigate a table in Bubble.
Master Bubble table navigation: Learn to use arrow keys and enter for seamless repeating group browsing!
Unlock powerful keyboard shortcuts: Discover how to implement up, down, and enter key functionality in your Bubble tables.
Elevate user experience: Create intuitive navigation in repeating groups with custom states and conditional formatting.
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.
The best way to learn Bubble.io?
Start building with total confidence
No more delays. With 30+ hours of expert content, you’ll have the insights needed to build effectively.
Find every solution in one place
No more searching across platforms for tutorials. Our bundle has everything you need, with 500+ videos covering every feature and technique.
Dive deep into every detail
Get beyond the basics with comprehensive, in-depth courses & no code tutorials that empower you to create a feature-rich, professional app.

Frequently Asked Questions
Find answers to common questions about our courses, tutorials & content.
No. Our Beginner Essentials course and AI No-Code Coach are designed for total newcomers. You’ll learn Bubble.io step by step - no coding required.
Simply type your question in plain English, and our AI taps into the entire video library to recommend the exact lessons you need. It’s like having a personal instructor on demand.
As long as you’re subscribed! With our monthly subscription, you get unlimited access to all 500+ videos, our growing course library, and the AI No-Code Coach.
Your subscription includes:
- Bubble Beginner Essentials – Get up and running fast.
- Build a ChatGPT Clone – Integrate AI into your no-code apps.
- Build Your SaaS Website with AI – Learn to create a scalable startup site.
Plus, new tutorials every week!
The AI No-Code Coach is your first stop for instant answers. If you need deeper help, you can book 1:1 Bubble coaching for expert guidance.
Yes! If you don’t see real progress within 14 days, let us know, and we’ll issue a full refund—no questions asked.
Absolutely. Your subscription is month-to-month, and you can cancel anytime—no lock-ins, no hidden fees.
Absolutely. Your subscription is month-to-month, and you can cancel anytime—no lock-ins, no hidden fees.
If you’re serious about building a successful SaaS startup, check out Mastery—our intensive mentorship program. Mastery goes beyond Bubble.io development and includes:
- 1:1 mentorship to fast-track your progress
- Marketing strategies tailored for no-code founders
- Product management insights to scale your startup
- Personalized support from experienced founders