Arrow Table
Navigate HTML tables with arrow keys.
Usage
$('#my-table').arrowTable();Examples
Enabling only certain keys
$('#my-table').arrowTable({ enabledKeys: ['up', 'down'] });Using beforeMove
You can use this callback to decide whether to allow the move or not. If you return false the plugin will stop the move.
$('#my-table').arrowTable({ focusTarget: 'input, textarea', beforeMove: function(input, targetFinder, direction) { // Determine the target var target = targetFinder(); if (direction === 'up' && $(target).is('textarea')) { // Don't allow move return false; } // Return nothing to allow the move } });It's even possible to modify the table in the beforeMove callback adding a row and the plugin will find the newly added row.
$('#my-table').arrowTable({ beforeMove: function(input, targetFinder, direction) { if (direction === 'down') { $(input).closest('table').find('tbody').append('<tr><td><input type="text"/></td></tr>'); } } });See all possible options below.
Options
| Option | Default | Description |
|---|---|---|
| enabledKeys | ['left', 'right', 'up', 'down'] | Enabled keys |
| listenTarget | 'input' | Target to listen for key move events |
| focusTarget | 'input' | Target to focus after move |
| continuousDelay | 50 | Delay in ms before moving onto next cell when holding arrow keys down |
| beforeMove | $.noop | Before moving callback. Return false to stop move |
| afterMove | $.noop | After moving complete callback. |
API
destroy
$('#my-table').arrowTable('destroy');Destroy the plugin instance
