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

Question

我目前正在开发 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>

Answer 1

我认为

DataGrid

列默认使用字符串比较器，如果你想对数字列进行排序，请尝试将类型设置为

'number'

：

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

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

sortModel

仅描述了

DataGrid

的排序状态，所以我怀疑它能否解决你的问题。

Answer 2

sortComparator: (v1, v2) => parseInt(v1) - parseInt(v2),

为我工作

Answer 3

        Type Number value coming from API server side and will display a different value with modification      
        
        { field: "controlTriggerLowerVal", headerName: "Lower Trigger", width: 150 ,type: "number",headerAlign: "left",
                              renderCell: (cellValues) => {
                                return  <> {cellValues.row.calculateLowerTrigger} </>;
                              },flex:1,align: 'left'
                              
    
    Another way to write custom sort , also handles null and space:
    
    nullSpaceHandlingSortComparator = (
        v1,
        v2,
        cellParams1,
        cellParams2
      ) => {
        const sortModel = cellParams1.api.getSortModel();
        const sortColumn = sortModel.find(
              (sm) => sm.field == cellParams1.field
        );
        if (sortColumn && sortColumn.sort == "desc") {
            if ((v1 == null && v2 == null) || (v1 == "" && v2 == "")) {
            return -1;
            }
            if ((v1 == null) || (v1 == "")) {
            return -1;
            }
            if ((v2 == null) || (v2 == "")) {
            return 1;
            }
          return v1 - v2; 
        }else{
    
          if ((v1 == null && v2 == null) || (v1 == "" && v2 == "")) {
              return 0;
          }
          if ((v1 == null) || (v1 == "")) {
              return 1;
          }
          if ((v2 == null) || (v2 == "")) {
              return -1;
          }
          return v1 - v2;  
        }
      };

 { field: "controlTriggerLowerVal", headerName: "Lower Trigger", width: 150 ,type: "number",headerAlign: "left",
                  renderCell: (cellValues) => {
                    return  <> {cellValues.row.calculateLowerTrigger} </>;
                  },flex:1,align: 'left',
                  sortComparator: this.nullSpaceHandlingSortComparator,
                  }

Answer 4

您正在遭受字母排序和自然排序之间的差异之苦。

按照字母顺序排序，你会得到：

AA
AAA
AB

这是预料之中的。再次应用于带有数字的值，以下是正确的（但不是您想要的）：

A1
A11
A2

在自然排序中，排序算法尝试根据折叠并视为数字的连续数字来识别要排序的文本标签中的整数。你会得到：

A1
A2
A11