We can single out 2 types of navigation in DataTable:
When one of the types is available, the other is blocked. I.e. when you open some cell editor, you won't change the selection any more, but can go to another editor within cells available for editing.
Once all editors are closed, you can again move selection to another cell (row, column).
The selection navigation is enabled by default in DataTable.
| Command | Description |
|---|---|
| Up arrow key | moves one cell (row) to the up |
| Down arrow key | moves one cell (row) to the down |
| Left arrow key | moves one cell (column) to the left |
| Right arrow key | moves one cell (column) to the right |
| Home | moves to the top left cell(row, column) in the grid |
| End | moves to the bottom right cell(row, column) in the grid |
| PGUP | scrolls the table up |
| PGDN | scrolls the table down |
Related sample: Navigation in DataTable
You can set focus on DataTable with the help of the UIManager module:
Focusing widget with "books" ID
webix.ui({ id:"books", view:"datatable" });
webix.UIManager.setFocus("books"); //to set focus
$$("books").select($$("books").getFirstId()); //to mark focusing visually
Active editor navigation is navigating within cells available for editing: closing the currently active editor and opening the editor in the next/previous cell.
The navigation is activated once you enable editing in the table.
webix.ui({
view:"datatable",
editable:true
});
| Command | Description |
|---|---|
| Tab | closes the current editor and opens the next one |
| Shift + Tab | closes the current editor and opens the previous one |
You can read more about editing and active editor navigation in article DataTable Editing.
Related sample: The Tab Key Navigation
Back to top