Key Bindings
Overview
The keybidings module allows you to bind different keyboard shortcuts to actions on your table, as long as it has focus .
This is enabled by default to allow you to navigate around cells when editing and scroll up and down your table using arrow keys and pageup/pagedown keys
Default Key Bindings
By default the following actions are bound to the listed key combinations:
Action | Default Key Combination (keycode) | Function |
---|---|---|
navPrev | shift + tab ("shift + 9") | Shift focus to the next editable cell on the left, if none available move to the right most editable cell on the row above |
navNext | tab ("9") | Shift focus to the next editable cell on the right, if none available move to left most editable cell on the row below |
navLeft | up arrow ("37") | Shift focus to next editable cell on the left |
navRight | up arrow ("39") | Shift focus to next editable cell on the right |
navUp | up arrow ("38") | Shift focus to the same cell in the row above |
navDown | down arrow ("40") | Shift focus to the same cell in the row below |
undo | ctrl + z ("ctrl + 90") OR meta(cmd) + z ("meta + 90") | Undo last user data edit |
redo | ctrl + y ("ctrl + 89") OR meta(cmd) + y ("meta + 89") | Redo last user data edit |
scrollPageUp | Page Up ("33") | Scroll page up by table height |
scrollPageDown | Page Down ("34") | Scroll page down by table height |
scrollToStart | Home ("36") | Scroll to first row |
scrollToEnd | End ("35") | Scroll to last row |
copyToClipboard | ctrl + c ("ctrl + 67") OR meta(cmd) + c ("meta + 67") | Copy table data to clipboard |
rangeJumpUp | ctrl + up ("ctrl + 38") OR meta(cmd) + up ("meta + 38") | Navigate range cursor up to next cell with value |
rangeJumpDown | ctrl + down ("ctrl + 40") OR meta(cmd) + down ("meta + 40") | Navigate range cursor down to next cell with value |
rangeJumpLeft | ctrl + left ("ctrl + 37") OR meta(cmd) + left ("meta + 37") | Navigate range cursor left to next cell with value |
rangeJumpRight | ctrl + left ("ctrl + 39") OR meta(cmd) + left ("meta + 39") | Navigate range cursor left to next cell with value |
rangeExpandUp | shift + up ("ctrl + 38") | Expand active range up one row |
rangeExpandDown | shift + down ("ctrl + 40") | Expand active range down one row |
rangeExpandLeft | shift + left ("ctrl + 37") | Expand active range left one column |
rangeExpandRight | shift + right ("ctrl + 39") | Expand active range right one column |
rangeExpandJumpUp | ctrl + shift + up ("ctrl + shift + 38") OR meta(cmd) + shift + up ("meta + shift + 38") | Expand active range up to next cell with value |
rangeExpandJumpDown | ctrl + shift + down ("ctrl + shift + 40") OR meta(cmd) + shift + down ("meta + shift + 40") | Expand active range down to next cell with value |
rangeExpandJumpLeft | ctrl + shift + left ("ctrl + shift + 37") OR meta(cmd) + shift + left ("meta + shift + 37") | Expand active range left to next cell with value |
rangeExpandJumpRight | ctrl + shift + right ("ctrl + shift + 39") OR meta(cmd) + shift + right ("meta + shift + 39") | Expand active range right to next cell with value |
Customize Key Bindings
If you would prefer to use different key combinations then that is no problem, you can use the keybindings option to change any of the above bindings.
The keybindings option takes an object that should consist of properties with the name of the action you wish to bind and a value of the key code string.
The key code can comprise of either a single keycode, or the action key (ctrl, shift or meta) and the keycode separated by a + symbol.
The example below shows how to change the key bindings for the redo function to user the ctrl and r keys:
var table = new Tabulator("#example-table", { keybindings:{ "redo" : "ctrl + 82", //bind redo function to ctrl + r }, });
Multiple Key Combinations
It is possible to bind multiple key combinations for a single action by passing an array of strings to its property:
var table = new Tabulator("#example-table", { keybindings:{ "redo" : ["ctrl + 82", "meta + 82"], //bind redo function to ctrl + r or meta + r }, });
Keycode Lookups
If you are binding an action to an a - z key, then it is possible to use the character itself and let Tabulator lookup the keycode for you:
var table = new Tabulator("#example-table", { keybindings:{ "redo" : "ctrl + r", //bind redo function to ctrl + r }, });
Disable Existing Keybinding
Disable A Default Key Binding
To disable any of the default keybindings, pass a value of false to is property in the keybindings option:
var table = new Tabulator("#example-table", { keybindings:{ "navUp" : false, //disable navUp keybinding }, });
Disable All Key Bindings
To disable all key bindings set the keybindings option to false
var table = new Tabulator("#example-table", { keybindings:false, //disable all key bindings });