Ability to select only one row at a time (via checkbox)

[Ben-CA]

Use case

Currently you can select multiple rows with the checkboxes, which is great. However, sometimes you need to be able to select only one row at a time.

Proposed solution

    rowSelection={'single'} // default being 'multiple'

[Ben-CA]

I've come up with a work around to only select one row at a time...

  const onSelectedRowsChange = (rows) => {
      const last = (rows.size > 0) ? [...rows].at(-1) : null;
      setSelectedRows(new Set(last));
  };

Used in the grid:

<DataGrid onSelectedRowsChange={onSelectedRowsChange} ...... />

[Ben-CA]

Note, I'm also using this in conjunction with the following code for the column definitions, such that the checkbox is not displayed in the column header:

const CustomSelectColumn = {
  ...SelectColumn,
  renderHeaderCell: null,
};

Since it would be counter intuitive to have a Select All / Select None when only one row can be selected.

[Ben-CA]

Also, because there is no function like:

onRowClick={handleRowClick}

Nor a function like:

rowSelectOnClick={true}

A workaround is:

const onCellClick = (event) => {
  if(event.row.categoryId){
    setSelectedRows(new Set(event.row.id)); // where id is your unique row id
  }
};

Used in the grid:

<DataGrid onCellClick={onCellClick} ...... />

[Ben-CA]

And if you want something that selects/unselects when you click:

  const onCellClick = (event) => {
    if(event.row.id){
      const value = (String(event.row.id) !== String([...selectedRows][0])) ? event.row.id: null;
      setSelectedRows(new Set(value));
    }
  };