Define min and max input values on MUI DataGrid number column/cell

Question

I am integrating a MUI DataGrid Pro as so:

<DataGridPro
  apiRef={apiRef}
  rows={rows || []}
  columns={columns}
  editMode="row"
  rowModesModel={rowModesModel}
  onRowModesModelChange={(newModel) => setRowModesModel(newModel)}
  processRowUpdate={processRowUpdate}
  onProcessRowUpdateError={handleProcessRowUpdateError}
  experimentalFeatures={{ newEditingApi: true }}
}}

In one of my type: number Columns, I want to enter only a value between 0 and 10. Input should be invalidated through typing or using the UI up/down controls.

I saw an API option for columnInputProps to be added to a GridColumn on this page, however cannot find any example usage. I tried the following:

{
  field: "count",
  headerName: "Count",
  type: "number",
  editable: true,

  // columnInputProps: { min: 0, max: 10 }, // FAIL
  // columnInputProps: { inputProps: { min: 0, max: 10 } }, // FAIL
  // valueInputProps: { min: 0, max: 10 }, // FAIL
  // valueInputProps: { inputProps: { min: 0, max: 10 } }, // FAIL
  // inputProps: { min: 0, max: 10 }, // FAIL
},

I suspect I'm misusing these features, as they are more concerned with filtering functionality.

Would appreciate someone pointing me in the right direction for setting a min max range on a MUI DataGrid column. Thanks in advance!

Answer 1

You can make it using the renderEditCell prop and pasing the inputProps directly

{
      field: "count",
      headerName: "Count",
      type: "number",
      editable: true,
    
      renderEditCell: (params) => (
            <GridEditInputCell
              {...params}
              inputProps={{
                max: 10,
                min: 0,
              }}
            />
          ),
    
},