[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Web Components Grid Cell Activation

    The Ignite UI for Web Components 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.

    Web Components 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.

    API References