0
275
ViewsHow to make cell.navigateLeft() work in Tabulator?
Because of another questions of mine (How to go to previous cell after pressing tab key?) I was learning how to use cell navigation
cell.navigateLeft(); //move focus left to next editable cell.
when I click "click me" cell I am expecting cursor to appear in Cell 3 becuse it is an input type of cell.
But whatever way I try it does nothing
table.on("cellClick", function(e, cell){
//e - the click event object
//cell - cell component
console.log("cell ", cell.getField())
console.log(table.navigateLeft())
table.navigateLeft()
console.log(cell.navigateLeft())
cell.navigateLeft()
console.log("cell ", cell.getField())
// console.log(cell.navigatePrev())
//console.log(cell.navigateRight())
});
Could someone explain how to use cell navigation?
Working jsFiddle.
1 answers
Answer question0
Cell navigation cannot be triggered on click, navigation lets you move the focus of the currently edited cell to another cell, if a cell isnt in focus (as would happen on a cellClick event) then it wont do anything. The navigation functions are primarily used to handle keyboard navigation round the table.
In your example you are also handling every cells click, not just the click on the "click me" column.
If you want to trigger the edit on a particular cell then you should call the edit function on that cells component. So for example in your example if we add a cellClick callback on the column definition for the click me column:
{title: "Click me", field: "c4", cellClick:function(e, cell){
cell.getRows().getCell("c3").edit();
}}
Though from a usability point of view, the user can just click in the cell they want to edit so none of this really feels nessisary