Tabulator: Keyboard navigation only if table is editable?

[roypardi]

Hello! I'm working with your great component again on a new project and have a quick question:

Is keyboard navigation (up/down arrows to step through rows) only available if the data is editable?

The docs are not clear on this (or I missed it). I've looked through the issues (keyboard navigation #962) and this seems the case – but then many of the examples at tabulator.info have keyboard nav but do not seem to be editable.

fwiw – I was able to extend the keybindings but if the functionality is already here, you have probably done it better 😄

$("#image-list").tabulator({
        height: "194",
        layout: "fitColumns",
        resizableColumns: false,
        movableRows: true,
        selectable: 1,
        responsiveLayout: "hide",
        placeholder: "No Images",
        keybindings: {
            "stepUp": 38,
            "stepDown": 40
        },
        columns: [
            { title: "Image Gallery", field: "imageName", headerSort: false, }
        ],
        rowClick: function (e, row) {
            setEventPreviewImage(row.row.data);
        },
        rowMoved: function (row) {
            setEventDirty();
        }
    });

Starting to extend...

 Tabulator.extendExtension("keybindings", "bindings", {
        "stepUp": 38,
        "stepDown": 40
    });

    Tabulator.extendExtension("keybindings", "actions", {
        "stepUp": function () {
            console.log('stepUp');

        },
        "stepDown": function () {
            console.log('stepDown');
        }
    });

[olifolkerd]

Hey @roypardi

at the moment it is only available on editable cells (non-editable cells are skipped over).

This is because currently Tabulator does not currently support cell level selection.

It is on the roadmap for one of the next couple of releases, so give it a few months and your wish will come true.

Cheers

Oli :)

[haferje]

It would be nice to have this implemented natively for non-editable tables. I have to implement the same functionality as @leonardorame, with the addition of row range selection using Shift+Up/Shift+Down.

Here's an example for the Up key, just overwriting the existing navUp() implementation:

Tabulator.prototype.extendModule("keybindings", "actions", {
    // allow Up key to select previous row
    navUp: function (e) {
        e.preventDefault(); // prevent scroll

        var selectedRows = this.table.getSelectedRows();
        if (!selectedRows.length)
            return;

        var lastSelectedRow = _.last(selectedRows);
        var prevRow = lastSelectedRow.getPrevRow();

        if (!prevRow)
            return;

        this.table.deselectRow(); // clear all
        this.table.selectRow(prevRow);
    },
});