MUI: How to delete selected rows in DataGrid programmatically?

Question

I'm creating a file list with MUI DataGrid. The user able to check the checkbox in DataGrid to make their selection. I want the checkbox to reset after the user perform some action such as delete the selected file.

The problem I'm facing is after I perform the delete action, the checkbox are still checked in the same spot. For example before I press the delete button:

After I press the delete button:

The checkbox are still checked on the second row. How do I reset the checkbox programmatically?

const [selectedFile, setSelectedFile] = useState([]); // To keep selected file
const [files, setFiles] = useState([]); // To keep uploaded file

const deleteSelectedFile = () => {
  const filteredFileList = files.filter(
    (item) => !selectedFile.includes(item)
  );
  setFiles(filteredFileList);
};

 <DataGrid
    rows={displayFile ? displayFile : []}
    columns={columns}
    pageSize={3}
    checkboxSelection
    onSelectionModelChange={({ selectionModel }) =>
      setSelectedFile(selectionModel)
    }
  />

Brinkmanship

Answer 1

selectionModel is not an array of RowData, but RowId, so in your delete handler, you need to check if the selectionModel includes an item.id, not item:

const deleteSelectedFile = () => {
  const filteredFileList = files.filter(
    (item) => !selectedFile.includes(item.id) 
  );
  setFiles(filteredFileList);
};

And because you're using controlled selection, you need to provide the selectionModel props to the DataGrid too:

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

<DataGrid
  {...props}
  onSelectionModelChange={setSelectionModel}
  selectionModel={selectionModel} // add this line
/>

Live Demo

Pseudohemophilia

This requires an update, delete button no longer working. – Generalissimo

@ReactPotato I've updated the answer to v5. The API should be simpler than before. – Pseudohemophilia

Answer 2

You could try this, Controlled selection in datagrid

 <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        checkboxSelection
        onSelectionModelChange={(newSelection) => {
          setSelectionModel(newSelection.selectionModel);
        }}
        selectionModel={selectionModel}
        {...data}
      />
      <div aria-hidden onClick={() => setSelectionModel([])}>
        deselect all
      </div>
 </div>

onSelectionModelChange & selectionModel props can be used to control the selection values in data-grid.

Refer this code sandbox

Whalebone

This helped me :3 thank you – Generalissimo

Answer 3

Simple way to control row selection

    const [rowSelectionModel, setRowSelectionModel] = React.useState([]);

    return (
       <DataGrid
        rowSelectionModel={rowSelectionModel}
        onRowSelectionModelChange={setRowSelectionModel} 
        
        checkboxSelection  // Enables check box
        ... 
       />
    );

Each time you select new row it will set all selected rows to state by replacing existing state values So Now you can deselect by clearing the state i.e setting empty []

setRowSelectionModel([])

or apply your own logic for select/deselect.

to get row data of selected rows you can use the ids from rowSelectionModel it contains array of selected row id. You can have useEffect to to get rows id and get actual data of row or have a method like this

        onRowSelectionModelChange={(params) => {
          setRowSelectionModel(params)
          setSelectedRowsData(rows.filter((row) => params.includes(row.id)));
        }}

changes for v6

Old name
selectionModel
onSelectionModelChange

New name
rowSelectionModel
onRowSelectionModelChange

ref: https://mui.com/x/migration/migration-data-grid-v5/

Troth