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 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).
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,
...
})
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 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
});
Command | Description |
---|---|
Tab | closes the current editor and openes the next one |
Tab + Shift | closes the current editor and openes 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