Keyboard navigation

We can single out 2 types of navigation in DataTable:

  1. Navigating the selection
  2. Navigating the active editor

When one of the types is available, the other is blocked, i.e. when you open some cell editor you won't navigate the selection any more but can navigate the active editor within cells available for editing. Once no editors is open, you can again navigate the selected cell (row, column).

Selection navigation

Initially, the selection navigation is disabled in DataTable.

To activate it, set the navigation parameter to true.

Activating the selection keyboard navigation in DataTable

webix.ui({
    view:"datatable",
    navigation:true,
    ...
})
Table 1 Keyboard commands for navigating the selection
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

Active editor navigation

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.

dtable = new webix.ui({
        view:"datatable",
        ...
        editable:true
});
Table 2 Keyboard commands for navigating the active editor
Command Description
Tab closes the current editor and opens the next one
Tab + Shift 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