Selecting but not immediately editing cells in Tabulator - tabulator

Question

I'm trying to setup an editable grid in Tabulator where I want to click on a cell to select it and then use arrow keys to move around the grid.
Then, if a key is pressed such as Enter, the value is able to be edited.
The current behaviour that I can't seem to disable is that as soon as you click on an editable cell it immediately opens the editor. Depending on the type of editor, the arrow keys might move to the adjacent cell or they might just interact with the editor (e.g. for a select editor, the up and down just moves up and down the list of options). If I hit Esc in the cell then editing stops as expected but the cell is not selected in any way so there is no way to move to an adjacent cell.
A very simple setup for the table is,
{
data: gridData,
layout: "fitColumns",
columns: [
{ title: 'Name', width: 100, field: 'name', editor: 'input', },
{ title: 'Age', width: 60, field: 'age', editor: 'number', },
{ title: 'Colour', width: 100, field: 'colour', editor: 'select', editorParams: {
values: ['red', 'green', 'blue']}
},
{ title: 'Progress', width: 80, field: 'progress', editor: 'number', },
],
pagination: "local",
paginationSize: 25,
paginationSizeSelector: true,
}

Answer 1

You can navigate inside your tabulator table with the following code:
keybindings:{"navUp" :"38","navDown" :"40","navLeft" :"37","navRight" :"39"},
Moreover you can asign double click inside column declaration in order to change your data.
{title:"Name", field:"name", cellDblClick:function(e, cell){
//e - the click event object
//cell - cell component
},
}
To prevent enter data with one click, just leave empty the corresponding callback.
Also take a look at this helpful documentation: Tabulator Key Bindings
and Tabulator Click events