Skip to main content

​
Overview

The useRowSelection hook is used within custom cell renderers to implement custom row selection functionality. It provides access to the current row’s selection state and a callback to change the selection.

​
Signature

function useRowSelection<R>(): {
  isRowSelectionDisabled: boolean;
  isRowSelected: boolean;
  onRowSelectionChange: (event: SelectRowEvent<R>) => void;
}

​
Return Value

​
isRowSelectionDisabled
boolean
Whether selection is disabled for this row.
​
isRowSelected
boolean
Whether this row is currently selected.
​
onRowSelectionChange
(event: SelectRowEvent<R>) => void
Callback function to change the selection state of the row.

​
SelectRowEvent Type

interface SelectRowEvent<R> {
  row: R;
  checked: boolean;
  isShiftClick: boolean;
}
​
row
R
required
The row object.
​
checked
boolean
required
Whether the row should be selected.
​
isShiftClick
boolean
required
Whether the shift key was pressed during selection (for range selection).

​
Usage

This hook must be called within a custom cell renderer that is rendered inside the DataGrid. 
import { useRowSelection, type RenderCellProps } from 'react-data-grid';

function CustomSelectCell({ row }: RenderCellProps<Row>) {
  const { isRowSelectionDisabled, isRowSelected, onRowSelectionChange } = useRowSelection();

  return (
    <input
      type="checkbox"
      disabled={isRowSelectionDisabled}
      checked={isRowSelected}
      onChange={(event) =>
        onRowSelectionChange({
          row,
          checked: event.currentTarget.checked,
          isShiftClick: event.nativeEvent.shiftKey
        })
      }
    />
  );
}

​
Error Handling

The hook will throw an error if used outside of a cell renderer: 
Error: useRowSelection must be used within renderCell

Build docs developers (and LLMs) love

Get started for freeTalk to us