0
804
ViewsMultiple row selection on checkbox and single selection on clicking the row in MUI DataGrid
I'm using MUI DataGrid version 4 component.
What I want are:
- to enable multiple selections from the checkbox in the Data Grid (if the user select multiple rows using the checkbox)
- to disable multiple selections from the row in the Data Grid (if the user selects multiple rows)
- to enable single selection from the row in the Data Grid (if the user selects another row after selecting a row).
But what I get are:
- multiple selections from the checkbox are enabled (what I want)
- multiple selections from the row are enabled (what I don't want).
For the row selection, I want a single selection only like this answer MUI - Disable multiple row selection in DataGrid but with the multiple selections from the checkbox is enabled.
Here's my code: https://codesandbox.io/s/material-ui-data-grid-selection-vq1ny
Here is the documentation for the selection on the Data Grid component.
Note: it's okay to use DataGridPro component.
Please let me know if the question is not clear.
1 answers
Answer question0
You can control the selectionModel state and check if the user clicks the cell (not the checkbox). If they click the checkbox, onCellClick won't be fired, if they click other cells, onCellClick will fire, then based on that info to update the selectionModel accordingly:
const cellClickRef = React.useRef(null);
const [selectionModel, setSelectionModel] = React.useState([]);
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
checkboxSelection
selectionModel={selectionModel}
onCellClick={() => (cellClickRef.current = true)}
onSelectionModelChange={(selection, detail) => {
if (cellClickRef.current) {
if (selection.length > 1) {
const selectionSet = new Set(selectionModel);
const result = selection.filter((s) => !selectionSet.has(s));
setSelectionModel(result);
} else {
setSelectionModel(selection);
}
} else {
setSelectionModel(selection);
}
cellClickRef.current = null;
}}
{...data}
/>
</div>
);
