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).
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.