Delete

Users must select the rows they want to delete.
The onDelete callback is triggered when the trash icon is clicked.

Example Usage

const [rows, setRows] = useState<RowExample[]>(initialRows);

return <DataGridDS
  columns={columns}
  rows={rows}
  slotProps={{
    toolbar: {
      deleteAction: {
        onDelete: async (selectedRowsIds: GridRowSelectionModel) => {
          const success = await doDeleteApiCall(selectedRowsIds);
          if (!success) {
            alert(`API failed: the number of selected rows (${selectedRowsIds.length}) is odd.\nPlease try with an even number of selected rows.`);
            return false;
          }
          setRows((prev) => prev.filter((ele) => !selectedRowsIds.includes(ele.id)));
          return true;
        }
      }
    }
  }}
/>;