React Grid Cell Activation
The Ignite UI for React Data Table / Data Grid supports a cell activation feature that will enable keyboard navigation through the cells of the grid. This is activated by setting the activationMode property of the grid to Cell.
React Grid Cell Activation Example
Excel Style Navigation
enterBehaviorAfterEdit property will configure the grid to navigate to the next cell up, down, left or right after the enter key is pressed in edit mode. Otherwise, the enterBehavior property of the grid can be used to navigate to other cells, while not in edit mode, up, down, left or right.
Keyboard Navigation
After setting the activationMode property of the grid to Cell, this will enable a range of keyboard navigation options in the data grid. Below is a description of each of the key presses / combinations and the effect they will have relative to the currently activated cell:
- ↑: Navigate one cell up.
- ↓: Navigate one cell down.
- ←: Navigate one cell to the left on the current row only.
- →: Navigate one cell to the right on the current row only.
- Page Up: Scroll the grid one viewport page up.
- Page Down: Scroll the grid one viewport page down.
- Tab: Move the active cell to the next cell to the right, or the left-most cell of the next row if the last cell of that row is reached.
- Shift + Tab: Move the active cell to the next cell to the left, or the right-most cell of the previous row if the first cell of that row is reached.
- Ctrl + ↑: Move to the top cell in the column.
- Ctrl + ↓: Move to the bottom cell in the column.
- Ctrl + ←: Move to the left-most cell in the row.
- Ctrl + →: Move to the right-most cell in the row.
- Ctrl + Home: Move to the top-left cell in the grid.
- Ctrl + End: Move to the bottom-right cell in the grid.