定义MUI DataGrid数字列/单元格的最小和最大输入值

Question

我正在集成一个MUI DataGrid Pro:

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

在我的type: number列之一中，我只想输入0到10之间的值。输入应该通过键入或使用UI上/下控件而无效。

我在此页面上看到columnInputProps的API选项要添加到GridColumn，但是找不到任何示例用法。我尝试了以下操作:

{
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
},

我怀疑我误用了这些功能，因为它们更关心过滤功能。

将感谢有人指出我在正确的方向上设置MUI DataGrid列上的最小最大范围。提前感谢!

Answer 1

您可以使用renderEditCell道具并直接传递inputProps

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

renderEditCell: (params) => (
<GridEditInputCell
{...params}
inputProps={{
max: 10,
min: 0,
}}
/>
),

},