Jspreadsheet Keyboard Shortcuts

This section provides more information on the existing keyboard shortcuts and how to customize them in Jspreadsheet. Version 11 introduces a shortcut configuration tool allowing developers to create or adjust shortcuts to suit specific application requirements. Below is a table showcasing the keyboard shortcuts currently available.

Shortcut Description
ESC Cancel the cell edition or close the filter modal (when applicable).
ENTER Finalize edition (when applicable), create a new row (when applicable), and move selection down.
TAB Finalize edition (when applicable), create a new column (when applicable), and move selection right.
SPACE Toggle checkbox or radio values (when applicable).
DEL Clear the cell value.
F2 Start edition.
PAGE UP Move to the next page up.
PAGE DOWN Move to the next page down.
ALT + PAGE UP Move to the next page left.
ALT + PAGE DOWN Move to the next page right.
SHIFT + ENTER Finalize edition (when applicable) and move selection up.
SHIFT + TAB Finalize edition (when applicable) and move selection left.
ARROW UP Finalize edition (when applicable) and move selection one cell up.
ARROW DOWN Finalize edition (when applicable) and move selection one cell down.
ARROW LEFT Finalize edition (when applicable) and move selection one cell left.
ARROW RIGHT Finalize edition (when applicable) and move selection one cell right.
ALT + ARROW DOWN Show filter modal when filter is active.
CTRL + ARROW UP Finalize edition (when applicable) and move selection to the top of the column.
CTRL + ARROW DOWN Finalize edition (when applicable) and move selection to the bottom of the column.
CTRL + ARROW LEFT Finalize edition (when applicable) and move selection to the left of the row.
CTRL + ARROW RIGHT Finalize edition (when applicable) and move selection to the right of the row.
CTRL+A Select all cells.
CTRL+P Open the Print modal (when the Print extension is enabled).
CTRL+F Open the Advance Search modal (when the Search extension is enabled).
CTRL+S Download a CSV or a XLSX (when the Render extension is enabled).
CTRL+Y Redo.
CTRL+Z Undo.
CTRL+C Copy.
CTRL+V Paste.
CTRL+X Cut.
CTRL + Minus (on row) Delete a row when the row is selected.
CTRL + Minus (on header) Delete a column when the header is selected.

How to customize shortcuts?

Jspreadsheet version 11 brings a new shortcut management function that enable developers to customize or add their own shortcuts to the spreadsheets.

Custom Shortcut declarations

When a keyboard is activate the jspreadsheet checks if there is an equivalnet shortcut declared, if yes... jspreadsheet calls the shortcut, and this context is the worksheet where the action was excuted against it.

let shortcuts = {
    ctrlKey: {
        A: function() { this.selectAll(); },
        C: function() { this.copy(); },
        X: function() { this.cut(); },
        P: function() { this.print(); },
        S: function() { this.download(); },
        Z: function() { this.undo(); },
        Y: function() { this.redo(); },
        F: function() { this.showSearch(); },
        '-': function(e, event) {
            if (event.role === 'row') {
                this.deleteRow();
            } else if (event.role === 'header') {
                this.deleteColumn();
            }
        },
        ENTER: paste
    },
    shiftKey: {}, // If you have shiftKey shortcuts, add them here
    PAGEUP: function() { this.pageUp(); },
    PAGEDOWN: function() { this.pageDown(); },
    ARROWUP: function(e) { this.up(e.shiftKey, (e.ctrlKey || e.metaKey)); },
    ARROWDOWN: function(e) {
        let col = this.selectedCell[e.shiftKey ? 2 : 0];
        if (e.altKey && (this.options.filters || (this.cols[col] && this.cols[col].filter))) {
            this.openFilter(col);
        } else {
            this.down(e.shiftKey, (e.ctrlKey || e.metaKey));
        }
    },
    ARROWLEFT: function(e) { this.left(e.shiftKey, (e.ctrlKey || e.metaKey)); },
    ARROWRIGHT: function(e) { this.right(e.shiftKey, (e.ctrlKey || e.metaKey)); },
    HOME: function(e) { this.first(e.shiftKey, (e.ctrlKey || e.metaKey)); },
    END: function(e) { this.last(e.shiftKey, (e.ctrlKey || e.metaKey)); },
    ENTER: function(e) {
        if (e.shiftKey) {
            this.up();
        } else {
            if (this.selectedCell[1] === this.rows.length-1 &&
                this.options.allowManualInsertRow !== false) {
                // Create a new row
                this.insertRow();
            }
            this.down();
        }
    },
    TAB: function(e) {
        if (e.shiftKey) {
            this.left();
        } else {
            if (this.selectedCell[0] === this.cols.length-1 &&
                this.options.allowManualInsertColumn !== false) {
                // Create a new row
                this.insertColumn();
            }
            this.right();
        }
    },
    DELETE: function() {
        this.setValue(this.getSelected(), '');
    },
    F2: function(e) {
        if (this.selectedCell && this.selectedCell.length) {
            let cell = this.getCell(...this.selectedCell);
            if (cell) {
                this.openEditor(cell, false, e);
            }
        }
    }
}

Adding a new custom shortcut

Lets suppose you wish to create a new shortcut to call a custom plugin to print the content o fhte spredsheet.

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