Material-UI DataGrid 未正确排序数字列答案

【问题标题】：Material-UI DataGrid not sorting numeric column correctlyMaterial-UI DataGrid 未正确排序数字列
【发布时间】：2021-06-25 20:51:49
【问题描述】：

我目前正在使用 Material-UI 中的 DataGrid 组件。可以显示数据，但内置排序未按预期工作。当我尝试对 ASC/DESC 进行排序时，它是根据数字的第一个数字进行排序的。请看下图：

我在CodeSandbox 中尝试过使用假 API。它工作正常，但在我的应用程序中，排序表现不同。

然后我尝试添加 sortModel（遵循 Material-UI 排序文档），但它的行为仍然相同。我无法在文档中找到解决方案。

const sortModel = [{ field: "canaryDeviceId", sort: "asc" }];

<div style={{ height: "90%", width: "100%" }}>
  <DataGrid sortModel={sortModel} rows={rows} columns={columns} />
</div>

【问题讨论】：

标签： reactjs sorting datagrid material-ui

【解决方案1】：

我认为DataGrid列默认使用字符串比较器，如果要对数字列进行排序，请尝试将类型设置为'number'：

{
  field: "deviceID",
  headerName: "Canary DeviceID",
  type: "number",
},

然后我尝试添加 sortModel（遵循 Material-UI 排序文档），但它的行为仍然相同。

sortModel 只描述了DataGrid 的排序状态，所以我怀疑它是否能解决你的问题。

【讨论】：