CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Elham
Elham

Reputation: 85

pre selecting in mui datagrid disables the data grid

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 can't select any other rows after that and it looks like the whole table gets disabled.

Upvotes: 1

Views: 576

Answers (1)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41387

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])

Upvotes: 4

Related Questions