❤
npm
Sign UpSign In

arrow-table

1.0.0 • Public • Published

Arrow Table

Navigate HTML tables with arrow keys.

demo

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

Readme

Keywords

none

Package Sidebar

Install

npm i arrow-table

Weekly Downloads

1

Version

1.0.0

License

none

Unpacked Size

189 kB

Total Files

6

Last publish

Collaborators

  • garygreen
Try on RunKit
Report malware