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
below and then navigate with up/down keyboard arrows. Notice the currently active row changes as you hit
. By default keyboard navigation is enabled, but you can turn it off by specifying
. You can also use
to navigate the
rows. Additionally, when you move your mouse over a
row, it shows a hover state (this can be disabled by using
When using the controlled
callback prop to update the
, 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
key pressed to quickly navigate to other records. If this is the case, it's better to use the uncontrolled
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
key to perform the selection. If
, hitting the
key again deselects the selected row. You can also use mouse
to select, and
notifies you when the selection has changed.
enables the selection on the
- NOTE: this is uncontrolled selection, without any default selected values. For controlled selection, use
. For uncontrolled selection where you want to specify a default selection, use
Using controlled selection gives you a lot of flexibility like preventing certain rows from being selected, preventing row deselection on
ctrl/cmd + click, etc.