React Data Grid

Row Selection

react logo

Select a row by clicking on it. Selecting a row will remove any previous selection unless you hold down ^ Ctrl while clicking. Selecting a row and holding down ⇧ Shift while clicking a second row will select the range.

Configure row selection with the following properties:

  • rowSelection: Type of row selection, set to either 'single' or 'multiple' to enable selection. 'single' will use single row selection, such that when you select a row, any previously selected row gets unselected. 'multiple' allows multiple rows to be selected.

  • rowMultiSelectWithClick: Set to true to allow multiple rows to be selected with clicks. For example, if you click to select one row and then click to select another row, the first row will stay selected as well. Clicking a selected row in this mode will deselect the row. This is useful for touch devices where ^ Ctrl and ⇧ Shift clicking is not an option.

  • suppressRowDeselection: Set to true to prevent rows from being deselected if you hold down ^ Ctrl and click the row (i.e. once a row is selected, it remains selected until another row is selected in its place). By default the grid allows deselection of rows.

  • suppressRowClickSelection: If true, rows won't be selected when clicked. Use, for example, when you want checkbox selection or your managing selection from a custom component and don't want to select the row when the row is clicked.

When you pass data to the grid, it wraps each data item in a node object. This is explained in the section Client-Side Row Model. When you query for the selected rows, there are two method types: ones that return nodes, and ones that return data items. To get the selected nodes / rows from the grid, use the following API methods: