Documentation keyboard_arrow_right Shortcuts

Keyboard Shortcuts

This section documents the default keyboard shortcuts and the API for defining custom shortcuts. In version 12, shortcuts are handled through keyboard event matching. Developers can register shortcuts using key values, key codes, and modifier keys such as Ctrl, Shift, or Alt.

Important: Shortcuts are only applicable when not in editing mode. During editing mode, use the component's keyboard events instead.

What's new with Version 12

• Shortcuts are now objects that match the keyboard event, including key or code properties and ctrlKey, shiftKey, and altKey modifiers to bind a handler method.

Documentation

Methods

Shortcut object

Available shortcut properties:

interface Shortcut {
    key?: string,
    code?: string, // Key or code (From the keyboard event)
    handler: (event: Object) => void,
    ctrlKey?: boolean,
    altKey?: boolean,
    shiftKey?: boolean,
}

Existing shortcuts

Below is a table showcasing the keyboard shortcuts currently available.

Custom Shortcuts

Version 12 introduces a new shortcut system that allows developers to define or override keyboard shortcuts as needed for their application.

Execution Context

When a shortcut is triggered, Jspreadsheet checks for a matching custom definition. If found, the action executes in the context of the worksheet where the event occurred.

Existing Declarations

let startEdition = function(e, reset) {
    if (this.selectedCell && this.selectedCell.length) {
        let cell = this.getCell(...this.selectedCell);
        if (cell) {
            this.openEditor(cell, reset, e);
        }
    }
}

let options = [
    // ALTKEY
    {
        ctrlKey: false,
        altKey: true,
        key: 'ArrowLeft',
        handler: function() {
            let index = this.getWorksheetActive() - 1;
            if (index < 0) {
                index = this.parent.worksheets.length - 1;
            }
            this.openWorksheet(index);
        }
    },
    {
        ctrlKey: false,
        altKey: true,
        key: 'ArrowRight',
        handler: function() {
            let index = this.getWorksheetActive() + 1;
            if (index >= this.parent.worksheets.length) {
                index = 0;
            }
            this.openWorksheet(index);
        }
    },
    // CTRLKEY
    {
        ctrlKey: true,
        shiftKey: false,
        key: 'a',
        handler: function() {
            this.selectAll();
        }
    },
    {
        ctrlKey: true,
        shiftKey: false,
        key: 'c',
        handler: function() {
            this.copy();
        }
    },
    {
        ctrlKey: true,
        shiftKey: false,
        key: 'x',
        handler: function() {
            this.cut();
        }
    },
    {
        ctrlKey: true,
        shiftKey: false,
        key: 'p',
        handler: function() {
            this.print();
        }
    },
    {
        ctrlKey: true,
        shiftKey: false,
        key: 's',
        handler: function() {
            this.download();
        }
    },
    {
        ctrlKey: true,
        shiftKey: false,
        key: 'z',
        handler: function() {
            this.undo();
        }
    },
    {
        ctrlKey: true,
        shiftKey: false,
        key: 'y',
        handler: function() {
            this.redo();
        }
    },
    {
        ctrlKey: true,
        shiftKey: false,
        key: 'f',
        handler: function() {
            this.showSearch();
        }
    },
    {
        ctrlKey: true,
        shiftKey: false,
        key: '-',
        code: 'Minus',
        handler: function(e, event) {
            if (event.role === 'row') {
                this.deleteRow();
            } else if (event.role === 'header') {
                this.deleteColumn();
            }
        }
    },
    {
        ctrlKey: true,
        shiftKey: false,
        key: 'Enter',
        handler: function(e) {
            if (! e.target.classList.contains('jss_object')) {
                Clipboard.executePaste.call(this);
            }
        }
    },
    // SHIFTKEY
    {
        shiftKey: true,
        key: 'F10',
        handler: function(e, event) {
            let cursor = this.cursor;
            let position;
            if (cursor) {
                position = cursor.getBoundingClientRect();
            }
            Contextmenu.open.call(this, e, event, position);
        }
    },
    {
        shiftKey: true,
        key: 'F11',
        handler: function() {
            let index = this.getWorksheetActive() + 1;
            this.createWorksheet(null, index);
        }
    },
    // No modifiers
    {
        key: 'PageUp',
        handler: function() {
            this.pageUp();
        }
    },
    {
        key: 'PageDown',
        handler: function() {
            this.pageDown();
        }
    },
    {
        key: 'ArrowUp',
        handler: function(e) {
            this.up(e.shiftKey, isCtrl(e));
        }
    },
    {
        key: 'ArrowDown',
        handler: function(e) {
            let s = this.selectedCell;
            if (s) {
                let x = s[e.shiftKey ? 2 : 0];
                let y = s[e.shiftKey ? 3 : 1];
                if (e.altKey && Filters.icon.is.call(this, x, y)) {
                    this.openFilter(x);
                } else {
                    this.down(e.shiftKey, isCtrl(e));
                }
            }
        }
    },
    {
        key: 'ArrowLeft',
        handler: function(e) {
            this.left(e.shiftKey, isCtrl(e));
        }
    },
    {
        key: 'ArrowRight',
        handler: function(e) {
            this.right(e.shiftKey, isCtrl(e));
        }
    },
    {
        key: 'Home',
        handler: function(e) {
            this.first(e.shiftKey, isCtrl(e));
        }
    },
    {
        key: 'End',
        handler: function(e) {
            this.last(e.shiftKey, isCtrl(e));
        }
    },
    {
        key: 'Enter',
        handler: function(e) {
            if (e.shiftKey) {
                this.up();
            } else {
                let s = this.selectedCell;
                if (s) {
                    this.down();
                    if (this.options.allowManualInsertRow !== false) {
                        if (this.selectedCell[1] === s[1]) {
                            this.insertRow();
                            this.down();
                        }
                    }
                }
            }
        }
    },
    {
        key: 'Tab',
        handler: function(e) {
            if (e.shiftKey) {
                this.left();
            } else {
                let s = this.selectedCell;
                if (s) {
                    this.right();
                    if (this.options.allowManualInsertColumn !== false) {
                        if (this.selectedCell[0] === s[0]) {
                            this.insertColumn();
                            this.right();
                        }
                    }
                }
            }
        }
    },
    {
        key: 'Delete',
        handler: function() {
            this.setValue(this.getSelected(), null);
        }
    },
    {
        key: 'Backspace',
        handler: function(e) {
            if (isMac()) {
                this.setValue(this.getSelected(), null);
            } else {
                startEdition.call(this, e, true);
            }
        }
    },
    {
        key: 'F2',
        handler: startEdition
    }
];

Declare a New Shortcut

Use jspreadsheet.shortcuts.set() to register new keyboard shortcuts. Each shortcut requires a key (or key code), optional modifiers, and a handler function. The handler executes in the context of the worksheet that received the event.

jspreadsheet.shortcuts.set({
    key: 'P',
    ctrlKey: true,
    handler: function(e) {
        // This will be the worksheet
        let worksheet = this;
        // Get the worksheet data
        let data = worksheet.getData();
        // Call custom plugin
        myCustomPrintPlugin(data);
    }
});

// Apply bold to the data grid selected cells
jspreadsheet.shortcuts.set({
    key: 'B',
    ctrlKey: true,
    handler: function(e) {
        // This will be the worksheet
        let worksheet = this;
        // Apply bold
        worksheet.setStyle(worksheet.getSelected(), 'font-weight', 'bold');
    }
});

Removing Shortcuts

Use jspreadsheet.shortcuts.reset() to remove an existing shortcut:

// Remove the shortcut
jspreadsheet.shortcuts.reset({
    key: 'A',
    ctrlKey: true
});