<ReactDataGrid /> offers a rich selection-related functionality together with keyboard navigation. You can use single selection or multiple selection, row or cell selection. In this and the following pages we'll be explaining all of these features with examples to help you understand how to configure the <ReactDataGrid /> to support all those scenarios.<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).activeIndex (controlled) or defaultActiveIndex (uncontrolled), combined with onActiveIndexChange to have full control on user navigation and the currently active row in the <ReactDataGrid />.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.<ReactDataGrid /> with keyboard navigation, as the active index is updated, the <ReactDataGrid /> is automatically scrolled to show the currently active row in the viewport.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.ctrl/cmd + click, etc.columnUserSelect=false. See columnUserSelect for details.<ReactDataGrid /> supports very powerful multi-selection, including selection via a checkbox column. Let's start with a basic multi-select example.click, ctrl/cmd + click or shift + click just like in OS file-system explorers (Finder in macOS or Explorer in Windows) - so the same patterns people are already used-to are used by the <ReactDataGrid />.enableSelection=true and multiSelect=true.defaultSelected={} (use an object as a value) to have uncontrolled multiple selection. To specify some records should be selected by default, you can use defaultSelected={ 1: true, 5: true } - in this case, the items with the value of the idProperty equal to 1 and equal to 5 will be selected by default. See the example below for a demo.<ReactDataGrid /> and changes the current selection, onSelectionChange is called with an object, that has a data property (an array that holds all the selected items) and a selected property (an object with the selected items, keyed using their id properties as specified by idProperty).{5: true, 10: true} for the selected or defaultSelected respectively. If you specify a string or a numeric value, the <ReactDataGrid />assumes single selection.checkboxColumn and a checkbox column will be displayed as the first column of the grid and will be used for multiple selection.checkboxColumn=true the default checkbox column is rendered. Use checkboxColumn={... column config ...} to customize the appearance of the checkbox column and control any part of the rendering, just like you do for normal columns.permissionToCall, then try sorting by the grouped column. You can use keyboard navigation to collapse/expand group rows.