I think u can try something like this:

grid.events.on("BeforeKeyDown", (e) => {
  if (e.key === "Tab") {
    grid.editEnd()
  }
})

grid.events.on("AfterKeyDown", (e) => {
  if (e.key === "Tab") {
    var selected = grid.selection.getCell();
    if (selected) {
     grid.editCell(selected.row.id, selected.column.id);
    }
  }
})

https://snippet.dhtmlx.com/6bs7mh34

Documentation : https://docs.dhtmlx.com/suite/grid__api__refs__grid.html

Here is my code to create grid

grid = new GridDHX(gridContainer.current, {columns: props.columns,data: props.data,adjust: true,
editable: true,
autoEmptyRow: true,
autoWidth: true,
selection: “cell”,
enableEditEvents: true
});

And Modified click event for editing

  grid.current.events.on("CellClick", function(
    row,
    column,
    e
  ) {
    grid.editCell(row.id, column.id);
  });
}

I want tab should take next cell and become editable. I tried below code to end editing while pressing tab

grid.events.on(“beforeKeyDown”, function (e) {
if (e.key === “Tab”) {

        grid.editEnd()
      }

    })