KeyTable allows you to use keyboard navigation on a DataTables enhanced table, like an Excel spreadsheet. The focused cell is shown through the CSS class (focus - configurable using keys.className) which in the case below is simply a blue outline. Use your keyboard's arrow keys and click the cells in the table to navigate.

The following example demonstrates combination of Keytable extension and scrolling table feature. KeyTable supports DataTables' scrolling options (scrollX and scrollY) without required any additional configuration. As the navigation keys are used to alter the focus of the KeyTable, the DataTables scrolling position is altered to show the focused cell.

When KeyTable adds focus to a table's cell it adds a class (defined by keys.className - default focus). This class can be used to provide styling information to highlight the focused cell to the end user. The provided stylesheets use CSS outline to show focus, but any CSS property can be used. This example uses a thin outline with a green border color and a light green background to highlight the focused cell.

Enabling KeyTable on a DataTable is trivial with the keys option, however, to have it perform a useful function you'll want to know when the end user performs interaction options with the table's focus. For this KeyTable has a number of events it can trigger: key - a key has been pressed while a cell has focus; key-focus - a cell has gained focus; key-blur - a cell has lost focus.