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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.