DataGrid - Keyboard navigation

Keyboard navigation

The <ReactDataGrid /> supports keyboard navigation for both rows and cells. Keyboard navigation is very often used together with row or cell selection.

Keyboard navigation for rows

As already demoed in Row selection page, keyboard navigation can be used with or without row selection - the example below is configured without support for selection. Try clicking the <ReactDataGrid /> below and then navigate with up/down keyboard arrows. Notice the currently active row changes as you hit arrow up/down. By default keyboard navigation is enabled, but you can turn it off by specifying enableKeyboardNavigation=false. You can also use home/end or page up/down to navigate the <ReactDataGrid /> rows. Additionally, when you move your mouse over a <ReactDataGrid /> row, it shows a hover state (this can be disabled by using showHoverRows=false).
Use activeIndex (controlled) or defaultActiveIndex (uncontrolled), combined with onActiveIndexChange to have full control on user navigation and the currently active row in the <ReactDataGrid />.
When using the controlled activeIndex prop and onActiveIndexChange callback prop to update the activeIndex, if you're doing other compute intensive stuff on the render function, you might notice some performance degradation in the scenario when the user keeps arrow up/down key pressed to quickly navigate to other records. If this is the case, it's better to use the uncontrolled defaultActiveIndex prop instead to obtain better performance.
When navigating the <ReactDataGrid /> with keyboard navigation, as the active index is updated, the <ReactDataGrid /> is automatically scrolled to show the currently active row in the viewport.
In the example above you can use keyboard navigation and then hit the Enter key to perform the selection. If toggleRowSelectOnClick=true, hitting the Enter key again deselects the selected row. You can also use mouse click to select, and ctrl/cmd+click to deselect. onSelectionChange notifies you when the selection has changed.
enableSelection enables the selection on the <ReactDataGrid /> - NOTE: this is uncontrolled selection, without any default selected values. For controlled selection, use selected. For uncontrolled selection where you want to specify a default selection, use defaultSelected.
Using controlled selection gives you a lot of flexibility like preventing certain rows from being selected, preventing row deselection on ctrl/cmd + click, etc.
Browser text selection is disabled by default, since columnUserSelect=false. See columnUserSelect for details.

Keyboard navigation for cells

Besides row navigation, the <ReactDataGrid /> also supports keyboard cell navigation. In order to enable cell navigation, either specify the uncontrolled defaultActiveCell=[] prop or the controlled activeCell=[] prop.
By default, cell navigation is enabled when cell selection specified. Also cell selection is multiple by default - if you want to enable single cell selection, specify multiSelect=false.
The active cell value is an array of numbers (of length 2) - the first one is the row index and the second one is the column index:<rowIndex>,<columnIndex> - see activeCell (or defaultActiveCell) for details.
The cell selection value is an array of strings - each string representing a cell. The string for each cell is the value of the idProperty for that row, followed by a comma, followed by the name/id of corresponding column: <idProperty value>,<column id or name>.
Try and select a few cells in the grid above, then sort the grid by the age column and see selected cells remaining appropriately selected even after the sort. This is because the idProperty is used in the value for each selected cell.
You can use the little square at the bottom-right border of the active cell to drag and extend the current cell selection.
When selectOnDrag is enabled you can hold the mouse down on a cell and drag to another cell to create multiple cell selection.