[SOLVED] Tabulator Tab Key Automatically Entering Next Row

Tabulator Tab Key Automatically Entering Next Row

Using the excellent Tabulator JS library. I am implementing a Custom Editor that override the edit so I can interject some other logic.

At the end of the row, when I use the Tab key to edit and exit a cell with the success callback, it automatically wraps to select the next editable cell in the next row down. I want to prevent this default behavior, and decide what to do myself, such as finish the edit and deselect the cell.

success(newValue) -> using Tab key results in jumping to next row

Please help me discover if there is a way to override this default behavior! Thank you!

Reference: Custom Editor Docs: https://tabulator.info/docs/6.3/edit#edit-custom

Solution

const tableData = [
    {id:1, name:"saryah", age:"27"},
    {id:2, name:"saycu", age:"30"},
    {id:3, name:"line", age:"22"},
];

const customEditor = function(cell, onRendered, success, cancel) {
    const input = document.createElement("input");
    input.type = "text";
    input.value = cell.getValue();

    onRendered(() => input.focus());

    input.addEventListener("keydown", (e) => {
        if (e.key === "Tab") {
            e.preventDefault();
            e.stopPropagation();
            success(input.value);
        } else if (e.key === "Escape") {
            cancel();
        }
    });

    return input;
};


const table = new Tabulator("#table", {
    data: tableData,
    layout:"fitColumns",
    columns: [
        {title:"name", field:"name", editor:customEditor},
        {title:"age", field:"age", editor:"input"},
    ],
});

body { direction: ltr; font-family: sans-serif; }
#table { margin: 20px auto; width: 80%; }

<div id="table"></div>
    <link href="https://unpkg.com/tabulator-tables@6.3/dist/css/tabulator.min.css" rel="stylesheet">
<script src="https://unpkg.com/tabulator-tables@6.3/dist/js/tabulator.min.js"></script>