KeyTable

Spreadsheet navigation of a DataTable makes for an attractive and rapid data input interface, and also a very familiar one for those users experienced in Excel, OpenOffice or similar, who are now transitioning to web based apps.

KeyTable adds keyboard navigation to DataTables, operating in exactly the same way as traditional spreadsheet applications. Combined with AutoFill and Editor's inline editing a true spreadsheet-like environment can be created. Furthermore, using the keyboard accessibility features of Buttons allows a fully editable DataTable to be accessed using the keyboard only.

Download

The easiest way to get and use KeyTable is to use the DataTables download builder where you can select the software that you wish to use on your page and have a single Javascript and CSS file created and hosted for you.

Alternatively, the individual files can be included on your page, a release package downloaded or the source control repository cloned on GitHub.

Initialisation

KeyTable can be initialised and used in two different ways:

  • As part of the DataTables constructor with the keys configuration option
  • A new constructor

In DataTables

KeyTable can be initialised on a DataTable by using the keys option in the DataTables options object - this is simply a boolean value, although it is also possible to use an object for options such as setting an initial focus (see the reference documentation):

$('#myTable').DataTable( {
    keys: true
} );

Constructor

Alternatively, KeyTable can be added to a table after it has been constructed using the Javascript new keyword with the $.fn.dataTable.KeyTable function. This function takes two parameters:

  1. The DataTable instance to apply the buttons to
  2. The KeyTable options (this is the same as the options available for the keys option.
var table = $('#myTable').DataTable();

new $.fn.dataTable.KeyTable( table, {
    // options
} );

Note that when using this initialisation method, the events and API methods of KeyTable are still accessed using the DataTables API which KeyTable augments to suit its requirements.

Features

Key features include:

  • Easy to use spreadsheet-like interaction
  • Fully integrated with DataTables
  • Built-in support for Editor
  • Easy to use events
  • Support for Bootstrap, Foundation and the other styling frameworks supported by DataTables.