Let disable row selection

[ofirrifo]

Use case

I have a case where I want to disable the checkbox of the row selection but I don't find a way todo so. I'm using the renderCheckbox somthing like this:

function renderCheckbox({ onChange, ...props }: RenderCheckboxProps) {
  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    onChange(e.target.checked, (e.nativeEvent as MouseEvent).shiftKey);
  }
  return <Checkbox  {...props} onChange={handleChange}/>
}

But I don't get any data about the current row.

Proposed solution

It would be nice if I can get additional prop row with all the details about the current row Like row data, row number, row id

[ericnjeru]

I looking for ways to disable the checkbox for specific rows. the proposed solution will be very useful.

[holospice18]

Not sure but try adding row or column to props: function renderCheckbox(_{ row, column, onRowChange, ...props }_: RenderCheckboxProps) {...}

[paustint]

You can have a fully custom "select" column for checkboxes with your own renderer where you have access to the row and column data and you should be able to figure out how to disable from here.

Here is a code snippet

import { SelectColumn, SELECT_COLUMN_KEY, useRowSelection } from 'react-data-grid';

// add this to the first column
const columns = [
  {
      ...SelectColumn,
      key: SELECT_COLUMN_KEY,
      resizable: false,
      renderCell: SelectFormatter,
      renderHeaderCell: SelectHeaderRenderer,
    },
... other columns
];

export function SelectFormatter<T>(props: RenderCellProps<T>) {
  const { column, row } = props;
  const [isRowSelected, onRowSelectionChange] = useRowSelection();

  return (
    <Checkbox
      label="Select row"
      hideLabel
      checked={isRowSelected}
      onChange={(checked) => onRowSelectionChange({ type: 'ROW', row, checked, isShiftClick: false })}
    />
  );
}

export function SelectHeaderRenderer<T>(props: RenderHeaderCellProps<T>) {
  const { column } = props;
  const [isRowSelected, onRowSelectionChange] = useRowSelection();

  return (
    <Checkbox
      label="Select all"
      hideLabel
      checked={isRowSelected}
      onChange={(checked) => onRowSelectionChange({ type: 'HEADER', checked })}
    />
  );
}

[ericnjeru]

The snippet was very useful, thanks @paustint.

[amanmahajan7]

RDG now supports a new isRowSelectionDisabled prop https://github.com/adazzle/react-data-grid/pull/3577