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:

    • Arrow Key Up: Navigate one cell up.
    • Arrow Key Down: Navigate one cell down.
    • Arrow Key Left: Navigate one cell to the left on the current row only.
    • Arrow Key Right: 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 + Arrow Key Up: Move to the top cell in the column.
    • Ctrl + Arrow Key Down: Move to the bottom cell in the column.
    • Ctrl + Arrow Key Left: Move to the left-most cell in the row.
    • Ctrl + Arrow Key Right: 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.