React Data Grid

Keyboard Interaction

react logo

The grid responds to keyboard interactions from the user as well as emitting events when key presses happen on the grid cells. Below shows all the keyboards interactions that can be done with the grid.

Use the arrow keys ( ) to move focus up, down, left and right. If the focused cell is already on the boundary for that position (e.g. if on the first column and the left key is pressed) then the key press has no effect. Use ^ Ctrl+ to move to the start of the line, and ^ Ctrl+ to move to the end.

If a cell on the first grid row is focused and you press , the focus will be moved into the grid header. The header navigation focus navigation works the same as the grid's: arrows will move up/down/left/right, ⇥ Tab will move the focus horizontally until the last header cell and then move on to the next row.

Use Page Up and Page Down to move the scroll up and down by one page. Use Home and End to go to the first and last rows.

When a header cell is focused, commands like Page Up, Page Down, Home, End, ^ Ctrl+/ will not work as they do when a grid cell is focused.

Groups

If on a group element, hitting the ↵ Enter key will expand or collapse the group.

Editing

Pressing the ↵ Enter key on a cell will put the cell into edit mode, if editing is allowed on the cell. This will work for the default cell editor.

Selection

Pressing the ␣ Space key on a cell will select the cells row, or deselect the row if already selected. If multi-select is enabled, then the selection will not remove any previous selections. ``

Suppress Focus

If you want keyboard navigation turned off, there are two properties that need to be turned off.

Suppress Cell Focus

Set suppressCellFocus=true in the gridOptions, and Grid Cell Focus will be disabled.

Suppress Header Focus

Set suppressHeaderFocus=true in the gridOptions, and Grid Header Focus will be disabled.

Column Header Navigation

The grid header supports full keyboard navigation, however the behaviour may differ based on the type of Column Header that is currently focused.

Column Headers can be:

  • Moved by pressing ⇧ Shift + / .
  • Resized by pressing ⌥ Alt + / .

Column Group Headers

While navigating Column Groups Headers, if the current Column Group is expandable, pressing ↵ Enter will toggle the expanded state of the group.

Normal Column Headers

Regular Column Headers may have selection checkboxes, sorting functions and menus, so to access all these functions while focusing a Column Header, you can do the following:

  • Press ␣ Space to toggle the Column Header checkbox selection.
  • Press ↵ Enter to toggle the sorting state of that column.
  • Press ⇧ Shift+↵ Enter to toggle multi-sort for that column.
  • Press ⌥ Alt+ to open the menu for the focused Column Header.
  • Press ^ Ctrl+↵ Enter to either open the menu for the focused Column Header (if columnMenu = 'legacy') or open the filter for the focused Column Header (if columnMenu = 'new').
  • When a menu is open, simply press ⎋ Esc to close it and the focus will return to the Column Header.

Floating Filter Headers

While navigating the Floating Filter Columns Headers with the keyboard, pressing will move focus from one Column Header to the next. If you wish to navigate within the Floating Filter Cell, press ↵ Enter to focus the first enabled element within the current Floating Filter Cell, and press ⎋ Esc to return focus to the Floating Filter Column Header.

Example

The example below has grouped headers, headers and floating filters to demonstrate the features mentioned above:

Custom Navigation

Most people will be happy with the default navigation the grid does when you use the arrow keys and the ⇥ Tab key. Some people will want to override this (e.g. you may want the ⇥ Tab key to navigate to the cell below, not the cell to the right). To facilitate this, the grid offers four methods: navigateToNextCell, tabToNextCell, navigateToNextHeader and tabToNextHeader.

Provide a callback navigateToNextCell if you want to override the arrow key navigation.