pre selecting in mui datagrid disables the data grid

November 30, 2022

I have a mui datagrid which i want to have preselected rows. this is my code

 const movieCrewList = movieCrew.map((item) => item.id);

 const [selecteTabledData, setSelectedTableData] = React.useState([]);

 <DataGrid
rows={crewData}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5]}
checkboxSelection
onSelectionModelChange={(selectionModel) => {
setSelectedTableData(selectionModel);
}}
selectionModel={movieCrewList}
/>

it works and I get the pre selected rows but the problem is I cant select any other rows after that and it looks like the whole table gets disabled.

>Solution :

use selecteTabledData in the selectionModel

  selectionModel={selecteTabledData}

use useEffect to set the default value in the state

const [selecteTabledData, setSelectedTableData] = React.useState([]);

useEffect(() => {
    const movieCrewList = movieCrew.map((item) => item.id);
    setSelectedTableData(movieCrewList)
}, [movieCrew])