Inline

To edit cells directly, use the native MUI DataGrid's processRowUpdate (and onProcessRowUpdateError if needed) callbacks.
Our Design System's DataGrid will automatically update the loading prop to display a loader.

Example Usage

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

return <DataGridDS
  columns={columns}
  rows={rows}
  editMode="cell"
  processRowUpdate={async (newRow, oldRow) => {
    console.log(newRow, oldRow);

    const success = await doSaveApiCall(newRow as RowExample);
    if (!success) {
      throw new Error(`API failed: row ID ${newRow.id} is odd.\nPlease try with an even ID.`);
    }

    setRows((prevRows) => prevRows.map((row) => row.id === newRow.id ? { ...row, ...newRow } : row));
    return newRow;
  }}
  onProcessRowUpdateError={(error: Error) => {
    alert(error.message);
  }}
/>;