Bulk

In bulk mode, users must select the rows they want to edit and click on the save or cancel icon.
The onSaveBulkEdit callback is triggered when the save icon is clicked.
If the callback returns true, the changes are applied to the grid; if it returns false, the changes are discarded.

Example Usage

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

return <DataGridDS
  columns={columns}
  rows={rows}
  slotProps={{
    toolbar: {
      bulkEditAction: {
        onSaveBulkEdit: async (selectedIds, selectedRows) => {
          const success = await doSaveApiCall(selectedRows as RowExample[]);
          if (!success) {
            alert(`API failed: the number of selected rows (${selectedRows.length}) is odd.\nPlease try with an even number of selected rows.`);
            return false;
          }
          setRows((prevRows) =>
            prevRows.map((row) =>
              selectedIds.includes(row.id) ? (selectedRows as RowExample[]).find(({ id }) => id === row.id) ?? row : row
            )
          );
          return true;
        }
      }
    }
  }}
/>;