Skip to content

Latest commit

 

History

History
75 lines (58 loc) · 1.91 KB

README.md

File metadata and controls

75 lines (58 loc) · 1.91 KB

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