Wednesday, March 18th, 2009

KeyTable: Instant keyboard navigation in a table

Category: JavaScript, Library, Utility

Allan Jardine is up to his old tricks again (his tricks are: creating helpful small tools!). This time he has created KeyTable, a library that adds the ability to use the keyboard to navigate around an HTML table.

Events can be bound (and unbound) to cells as required by the developer, allowing increased accessibility to Javascript enhanced tables. This library is somewhat similar to QFocuser that was posted on Ajaxian back at the start of the month, but specialises in table navigation. KeyTable also integrates nicely with DataTables, such that paging and sorting is taken into account.

To get started you just need to var keys = new KeyTable(); and then you can add init params for fine grained work, and you can also add events:


  1. /* Example event listener */  
  2. keys.event.focus( 1, 3, function() {  
  3.     /* processing on cell 1,3 ... */  
  4. } );  
  6. /* this is exactly the same as */  
  7. keys.event.focus( $('#example tbody tr:eq(3) td:eq(1)')[0], function() {  
  8.     /* processing on cell 1,3 ... */  
  9. } );

The front page has an example that uses jEditable allowing you to mouse around, hit enter, change a field, and go back:

Posted by Dion Almaer at 12:16 am

4.1 rating from 16 votes


Comments feed TrackBack URI

I’d love it except that it doesn’t seem to work correctly in Safari 4. Hitting the return key doesn’t appear to do anything whatsoever (Safari 4/Mac OS X Leopard). Safari 4 is the love of my life so it’s got to work correctly for it in order to win me over.

Comment by JonBad — March 18, 2009

Hi JonBad,

Thanks for spotting that. There appears to be a small bug in Safari 4 (need to track it down and file a bug report…) which stopped this operation working correctly (Safari 3 was fine). I’ve corrected this now and the editing example works in Safari 4 and Chrome.


Comment by theallan — March 18, 2009

Just one little thing. The “KeyTable form integration example” works fine going down with “TAB”. But going back up with “Shift + TAB” it will not take me out of the table to the “input 2”

Comment by Novalis — March 18, 2009

Hi Novalis,

Good call. I had thought about this before and prototyped it but it didn’t work. However I’ve just realised that I made a very simple mistake in my prototype, and it works great now :-) I’ve updated KeyTable to take account of this.


Comment by theallan — March 18, 2009

Awesome script with a ton of good examples.

Could we get a working example with a MySQL dump / example?

Comment by aw93053 — March 18, 2009

i love this table widget and it get’s even better and better!

Comment by aurora — March 18, 2009

@aw93053: How do you mean? KeyTable will interact with any HTML table, so you can just output your MySQL db into an HTML table and initialise KeyTable on top of that. Or am I misunderstanding?

@aurora (and the kind words from others): :-) Thanks

Comment by theallan — March 18, 2009

@theallan oops, it’s so simple that it’s hard / confused me. please ignore my request I figured it out :)

Comment by aw93053 — March 18, 2009

Now you can color me impressed after the love was shown to Safari 4. Awesome work! I hope I find a place to use it.

Comment by JonBad — March 18, 2009

Hey, this sounds like it is what I’m looking for. I have written an app where I can use the keyboard to view the table and am trying to convert it over to jQuery using Flexigrid for the table.

What I need is this. , and arrow-dn moves down 1 row. Arrow-up moves up 1 row. I can handle that much.

But paging up and down is where I’m currently working. In Flexigrid, as long as the “grid” has focus, page up and page down work fine but I need to know when the end of the current result set is reached.

Basically, this app started as a desktop GUI app and I converted it to browser based. So, the user wants to see from 1 to X records (could be hundreds, could be thousands) “all at the same time”.

Well, due to loading this is what I’ve come up with. I only show X records (users choice, more records more time needed) but the user wants to be able to navigate down the page without having to hit a paging button. So, when they page down and hit the end of the current result set, an event is fired that reloads the table with the next result set.

In Flexigrid, even though it pages (which may be default to browser), the first row of the new “page” is not selected. In otherwords, if you select row 1 and page down 3 times, the first row that you see is not highlighted.

I got around this with HTML tables by keeping track of the tabindex and having a fixed “viewing area”, this allowed me to reposition the highlighted row.

Do you having anything that can help with what I need? Am I stating my issue “clear” enough?


Comment by Webspeeder — August 14, 2009

Leave a comment

You must be logged in to post a comment.