MUI X Data Grid - Disable multiple row selection

Question

I want to prevent the MUI X DataGrid multiple checkbox section. When I select the checkbox section, a particular row should be select and the other rows are remain unselected. I tried the disableMultipleSelection option but it would not work.

<DataGrid
  rows={cycle}
  columns={columns}
  pageSize={10}
  checkboxSelection
  disableMultipleSelection
  onRowSelected={({ data, isSelected }) => {
    setDisplay(isSelected);
    setCycleId(data.key);
    setCycleImg(data.storageRef);
  }}
/>

Do you have a tutorial, how you build this project? Your project looks huge! I am missing some parts unfortunately. — MrOrhan
– MrOrhan, Commented Jun 26, 2021 at 1:00

NearHuscarl · Accepted Answer · 2021-11-01 06:43:48Z

24

To disable multiple row selection, you have to set checkboxSelection props to false. disableMultipleSelection is only available in DataGridPro, not DataGrid.

<DataGrid
  {...props}
  checkboxSelection={false} // or remove it because it's false by default
/>

If you want both selection checkboxes and single row selection, you may need to control the selection state yourself and remove all but the latest selection when the selection model changes:

const [selectionModel, setSelectionModel] = React.useState<GridRowId[]>([]);

return (
  <div style={{ height: 400, width: '100%' }}>
    <DataGrid
      rows={rows}
      columns={columns}
      pageSize={5}
      checkboxSelection
      selectionModel={selectionModel}
      hideFooterSelectedRowCount
      onSelectionModelChange={(selection) => {
        if (selection.length > 1) {
          const selectionSet = new Set(selectionModel);
          const result = selection.filter((s) => !selectionSet.has(s));

          setSelectionModel(result);
        } else {
          setSelectionModel(selection);
        }
      }}
    />
  </div>
);

Live Demo

V5

V4

edited Nov 1, 2021 at 6:43

answered Mar 27, 2021 at 11:29

NearHuscarl

83.1k24 gold badges321 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Niku1998 Over a year ago

Thank you very much for your valuable time and for this solution. But I am facing an error when I try to implement this code. The Error is exactly showing on the state declaration time i.e An element access expression should take an argument.ts(1011). Can you give any suggestions for this error? ` const [selectionModel, setSelectionModel] = React.useState<GridRowId[]>([]);` The error is showing on GridRowId[] And thank you again for your time and solution.

NearHuscarl Over a year ago

The codesandbox is forked from the old Material-UI version. I updated the correct type in my answer @Niku1998

MrOrhan Over a year ago

RowId[] still showing error. Make 'React.useState<RowId[]>([]);' to 'React.useState([])'

NearHuscarl Over a year ago

@MrOrhan they changed all the type names in the newer version some time ago. See this PR. Replace RowId with GridRowId should fix it.

Collectives™ on Stack Overflow

MUI X Data Grid - Disable multiple row selection

1 Answer 1

Live Demo

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Live Demo

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related