DocumentationShortcuts

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 13

• Fill shortcuts: Ctrl+D fills down and Ctrl+R fills right, as in Excel. Formulas shift their relative references and the source formatting travels, in one undoable operation
• Block navigation: Ctrl+Arrow lands on the edge of the current value block, on the first value after a gap, or on the grid edge. Merged cells act as one cell, and Ctrl+Shift+Arrow extends the selection the same way
• F4: in the formula editor, cycles the reference under the caret through the absolute forms, sheet-qualified references included

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
});