# How best to navigate a "long" listbox \[table\]

**URL:** <https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941>\
**Category:** Swift\
**Created:** [15 April 2024 00:41 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941 "2024-04-15T00:41:31Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![DaveS](https://ifnotnil.com/user_avatar/ifnotnil.com/daves/32/79_2.png) [@DaveS](https://ifnotnil.com/u/DaveS)\
**Post date:** [15 April 2024 00:41 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/1 "2024-04-15T00:41:31Z")

</div>

![Screenshot 2024-04-14 at 5.35.26 PM](https://ifnotnil.com/uploads/default/original/2X/0/0045216681cd31451679009ce8f851a814c8a915.jpeg)

first off, this app is currently running under Swift and tvOS (AppleTV). on this screen there are two tables (ie. the two columns to the right). The first column is rather short and for the most part fits the screen.  
However the SECOND (far right table has at the moment 75 entries and is expected to grow to maybe double that). And while it can be filtered by items in Column 1, it can be tedious to scroll thru all the entries.

And since this is tvOS, that scrolling is done with a touchpad remote most of the time.

Any ideas on a better way to handle this? Adding a “search box” is an option, but again tvOS, so that paradighm is NOT the same as it would be under iOS or macOS

---

<div class="post-metadata">

**Author:** ![npalardy](https://ifnotnil.com/user_avatar/ifnotnil.com/npalardy/32/10_2.png) [@npalardy](https://ifnotnil.com/u/npalardy)\
**Post date:** [15 April 2024 03:04 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/2 "2024-04-15T03:04:38Z")

</div>

tvOS has search in apps  
AppleTV+ and so many others have that option

---

<div class="post-metadata">

**Author:** ![DaveS](https://ifnotnil.com/user_avatar/ifnotnil.com/daves/32/79_2.png) [@DaveS](https://ifnotnil.com/u/DaveS)\
**Post date:** [15 April 2024 04:56 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/3 "2024-04-15T04:56:01Z")

</div>

Yes. and as I mentioned the paradighm is way different. It requires a dedicated SCREEN (like an Alertbox does), so therefore it cannot be directly interactive with the screen shown above

so it would look something like this

 ![intro01](https://ifnotnil.com/uploads/default/original/2X/2/2996b68dc1732286c8287cca61eabc7134dd7a26.png)

I was hoping for ideas the would not require leaving the main screen

---

<div class="post-metadata">

**Author:** ![Spiff](https://ifnotnil.com/letter_avatar_proxy/v4/letter/s/b782af/32.png) [@Spiff](https://ifnotnil.com/u/Spiff)\
**Post date:** [15 April 2024 09:57 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/4 "2024-04-15T09:57:14Z")

</div>

How about some type of grid where you have square boxes instead of a pure list?

---

<div class="post-metadata">

**Author:** ![HalGumbert](https://ifnotnil.com/user_avatar/ifnotnil.com/halgumbert/32/2198_2.png) [@HalGumbert](https://ifnotnil.com/u/HalGumbert)\
**Post date:** [15 April 2024 13:39 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/5 "2024-04-15T13:39:42Z")

</div>

Best way is an alphabet down the right side. On selection of a letter, the list should jump to the first item with that letter.

I can’t find an image for AppleTV, but like:  
[![](https://www.codenameone.com/img/blog/alphabet-scroll.png) ](https://www.codenameone.com/img/blog/alphabet-scroll.png)

---

<div class="post-metadata">

**Author:** ![DaveS](https://ifnotnil.com/user_avatar/ifnotnil.com/daves/32/79_2.png) [@DaveS](https://ifnotnil.com/u/DaveS)\
**Post date:** [15 April 2024 14:17 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/6 "2024-04-15T14:17:20Z")

</div>

That idea works great for iOS/macOS, but not so much with tvOS due to the fact you have to “navigate” to the button before it can be pressed, but that is an idea I’d considered

What I am going to experiment with, is showing a Letter Grid to the left when “search” is selected, for some reason Apple (default) changed from a grid  
Similar to this…

 ![tvOS-Grid-style-password-entry](https://ifnotnil.com/uploads/default/original/2X/6/61cde6e870c47d07b5d9d26f2d219518c8c1df57.jpeg)

---

<div class="post-metadata">

**Author:** ![npalardy](https://ifnotnil.com/user_avatar/ifnotnil.com/npalardy/32/10_2.png) [@npalardy](https://ifnotnil.com/u/npalardy)\
**Post date:** [15 April 2024 14:34 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/7 "2024-04-15T14:34:51Z")

</div>

dont forget that if you use the tvOS search you can just say what you’re searching for to the Siri Remotes 🙂

---

<div class="post-metadata">

**Author:** ![HalGumbert](https://ifnotnil.com/user_avatar/ifnotnil.com/halgumbert/32/2198_2.png) [@HalGumbert](https://ifnotnil.com/u/HalGumbert)\
**Post date:** [15 April 2024 14:40 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/8 "2024-04-15T14:40:39Z")

</div>

> [@npalardy](#):
>
> say what you’re searching for to the Siri Remotes

Plex does that on the search screen with a keyboard. That seems to be native.

And I just found a pic with the the alphabet.

Both would be usefull. 🙂

[![](https://www.antoineguilbert.fr/wp-content/uploads/2014/02/interface-plex-synology.png) ](https://www.antoineguilbert.fr/wp-content/uploads/2014/02/interface-plex-synology.png)

---

<div class="post-metadata">

**Author:** ![DaveS](https://ifnotnil.com/user_avatar/ifnotnil.com/daves/32/79_2.png) [@DaveS](https://ifnotnil.com/u/DaveS)\
**Post date:** [15 April 2024 14:49 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/9 "2024-04-15T14:49:07Z")

</div>

voice sound like it might be a “fun” feature… and I don’t think that screen shot is tvOS 🙂

---

<div class="post-metadata">

**Author:** ![HalGumbert](https://ifnotnil.com/user_avatar/ifnotnil.com/halgumbert/32/2198_2.png) [@HalGumbert](https://ifnotnil.com/u/HalGumbert)\
**Post date:** [15 April 2024 14:49 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/10 "2024-04-15T14:49:48Z")

</div>

> [@DaveS](#):
>
> I don’t think that screen shot is tvOS

I’ll take a pic with my phone when I can.

---

<div class="post-metadata">

**Author:** ![HalGumbert](https://ifnotnil.com/user_avatar/ifnotnil.com/halgumbert/32/2198_2.png) [@HalGumbert](https://ifnotnil.com/u/HalGumbert)\
**Post date:** [15 April 2024 14:57 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/11 "2024-04-15T14:57:45Z")

</div>

It’s a good interface… When a letter is selected, the listbox scrolls to the first item beginning with that letter.

 ![IMG_0144](https://ifnotnil.com/uploads/default/original/2X/a/ad8185e654edc5e5db7e2c827e0e1d3c3de5ee64.jpeg)

---

<div class="post-metadata">

**Author:** ![npalardy](https://ifnotnil.com/user_avatar/ifnotnil.com/npalardy/32/10_2.png) [@npalardy](https://ifnotnil.com/u/npalardy)\
**Post date:** [15 April 2024 18:22 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/12 "2024-04-15T18:22:21Z")

</div>

I wonder if thats a standard tvOS ui feature or something Plesk did custom  
Either way it seems quite useful

---

<div class="post-metadata">

**Author:** ![HalGumbert](https://ifnotnil.com/user_avatar/ifnotnil.com/halgumbert/32/2198_2.png) [@HalGumbert](https://ifnotnil.com/u/HalGumbert)\
**Post date:** [15 April 2024 18:32 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/13 "2024-04-15T18:32:59Z")

</div>

Worst case is that it’s 26 or less buttons that scroll the listbox… 🙂

---

<div class="post-metadata">

**Author:** ![DaveS](https://ifnotnil.com/user_avatar/ifnotnil.com/daves/32/79_2.png) [@DaveS](https://ifnotnil.com/u/DaveS)\
**Post date:** [15 April 2024 19:00 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/14 "2024-04-15T19:00:38Z")

</div>

For now I’ve decided to put this feature on the back burner… I did an analysis of how many games started with which letters

the distrution of the 1st letter of game titles was very inconsistent… some letters only had 1 title, while 2 had \>9, and a bunch of letters had no titles at all

Thanks

---

<div class="post-metadata">

**Author:** ![MarkusWinter](https://ifnotnil.com/user_avatar/ifnotnil.com/markuswinter/32/32_2.png) [@MarkusWinter](https://ifnotnil.com/u/MarkusWinter)\
**Post date:** [15 April 2024 20:30 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/15 "2024-04-15T20:30:40Z")

</div>

> [@DaveS](#):
>
> and a bunch of letters had no titles at all

… then don’t show that letter …

---

<div class="post-metadata">

**Author:** ![jalih](https://ifnotnil.com/user_avatar/ifnotnil.com/jalih/32/5003_2.png) [@jalih](https://ifnotnil.com/u/jalih)\
**Post date:** [15 April 2024 21:09 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/16 "2024-04-15T21:09:58Z")

</div>

> [@DaveS](#):
>
> For now I’ve decided to put this feature on the back burner… I did an analysis of how many games started with which letters
> 
> the distrution of the 1st letter of game titles was very inconsistent… some letters only had 1 title, while 2 had \>9, and a bunch of letters had no titles at all

Trees to the rescue! You could build a Trie from your game list for fast string matching. I just tested this method using 8th as it supports some useful tree data structures out of the box and it works great!

A Google search finds Swift implementations for a Trie data sructure that you could use.

---

<div class="post-metadata">

**Author:** ![DaveS](https://ifnotnil.com/user_avatar/ifnotnil.com/daves/32/79_2.png) [@DaveS](https://ifnotnil.com/u/DaveS)\
**Post date:** [15 April 2024 21:25 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/17 "2024-04-15T21:25:18Z")

</div>

that would again be fine for iOS or macOS, but not for tvOS

---

<div class="post-metadata">

**Author:** ![jalih](https://ifnotnil.com/user_avatar/ifnotnil.com/jalih/32/5003_2.png) [@jalih](https://ifnotnil.com/u/jalih)\
**Post date:** [16 April 2024 19:58 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/18 "2024-04-16T19:58:23Z")

</div>

> [@DaveS](#):
>
> that would again be fine for iOS or macOS, but not for tvOS

Why a Trie would not work with tvOS?

You gave me an idea of implementing a help program with graphical user interface for the 8th. I use a Trie to store the complete wordlist of the 8th. That gives me a really fast word search with autocomplete for free. Help descriptions come from the 8th help database.

---

<div class="post-metadata">

**Author:** ![DaveS](https://ifnotnil.com/user_avatar/ifnotnil.com/daves/32/79_2.png) [@DaveS](https://ifnotnil.com/u/DaveS)\
**Post date:** [16 April 2024 20:22 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/19 "2024-04-16T20:22:47Z")

</div>

The manner of navigation in tvOS is very restricted. While I’m sure it is possible to navigate a treeview type structure… it would be much more difficult and time consuming (I believe) than simple scrolling the list…

remember… NO KEYBOARD… NO MOUSE…NO FINGER GESTURES either

---

<div class="post-metadata">

**Author:** ![npalardy](https://ifnotnil.com/user_avatar/ifnotnil.com/npalardy/32/10_2.png) [@npalardy](https://ifnotnil.com/u/npalardy)\
**Post date:** [16 April 2024 21:00 UTC](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941/20 "2024-04-16T21:00:33Z")

</div>

yeah at best its up down left & right

but storing the data as a trie doesnt mean you have to show it that way

I think he was meaning to use the trie as data storage structure

I’ve used tries for exactly that purpose and they can be stunningly fast

[Next page](https://ifnotnil.com/t/how-best-to-navigate-a-long-listbox-table/3941.md?page=2)
