KeyTable is a Javascript library which provides keyboard navigation and event binding for any HTML table. With KeyTable Excel style table navigation can be employed to provide features such as editing of a table without requiring a mouse. As a further bonus, KeyTable integrates seamlessly with DataTables.

Let’s jump straight into an example: the table below is editable through keyboard navigation. Simply navigate to the cell you wish to edit and hit return. This initialises the excellent jEditable plug-in for jQuery – make your edit and then hit return again to save.

Usage

Using KeyTable on a plain HTML is as simple as creating a new object:

 var keys = new KeyTable();  

By default, KeyTable will attach itself to the first table it finds in the DOM with the class ‘KeyTable’ and apply basic navigation controls. There are a number of initialisation parameters that you can pass into the constructor to provide a bit more control over the default behaviour:

• “focus” – which element in the table is to be focused on initially. This can either be a TD node element, or a set of coordinates (for example [0, 5]).
• “table” – TABLE node which KeyTable should attach to.
• “focusClass” – the class to be used for the focused cell (default “focus”).
• “initScroll” – scroll the viewport automatically to the first cell (default “true”).
• “form” – is the table part of a form or not. If so then it will handle tabbing for you (default “false”).
• “dataTable” – $().datatable() object, for use with DataTables (required DataTables 1.5 – note that it will not work with 1.5’s server-side processing component).
• “tabIndex” – the tab index to give to the hidden input field if using KeyTable as a form element.

Once KeyTable has been initialised you will most likely wish to add event listeners to the cell in the table. This is done thought the methods presented by the ‘event’ object of KeyTable. The following events are supported:

• “focus” – when the cell received focus
• “blur” – when the cell looses focus
• “action” – when the cell receives a ‘return’ key event
• “esc” – when the cell receives an ‘escape’ key event

Each of these events is applied by calling event.{event_name}() (where event_name is of course one of the events from above). This function accepts either two or three inputs:

• 1. TD node to receive the event listener
• 2. Event listener function
• or
• 1. Cell X coordinate
• 2. Cell Y coordinate
• 3. Event listener function

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

Events listeners can be removed through the ‘event.remove.{event_name}’ object. This function call expects the same inputs as the methods to add events, but in this case the event listener function is optional. If it is left off then all events of that type are removed from that cell.
Requirements and support:
KeyTable has been tested and works great on:

* IE6+
* Firefox 3+
* Safari 3+ (Safari 4 is required for correct tabbing with a “form” table)
* Opera 9.6 (Opera 10a has a rendering bug – bug filed)

I expect that plenty of other browser will work just fine as well. There is one little hiccup in the key event handling. It would appear that there is very little consistency between browsers on however to handle repeat events on ’special’ keys such as arrow keys. However, KeyTable does detection to overcome this issue.

KeyTable expects the target table to be well defined and to have a tbody tag. It will not work with out this! It also utilises jQuery’s selector and event methods in order to provide easy cross platform implementation. However, since my usage of jQuery is limited to just these two components it would be relatively trivial to port KeyTable to any other library you like.

Demo: http://www.sprymedia.co.uk/article/KeyTable
Download: http://www.sprymedia.co.uk/software/KeyTable/KeyTable.zip
Source: http://www.sprymedia.co.uk/article/KeyTable

Related Listings:

1. UITableFilter – jQuery Plugin A simple and easy to use jQuery plugin for filtering...
2. Drag and drop table content with JavaScript With few lines of JavaScript, you can drag and drop...
3. jQuery Fixed Table Header Plugin Fixed Table Header is fixing header row of table without...

Do you like this post?

Email: