排序不适用于 MUI 数据网格：数据网格 sortComparator 给出未定义

Question

我正在尝试使用数据网格中的嵌套值对数据进行排序，但在数据网格列的 sortComparator 上未定义

代码：列数据设置：

   { 
    headerName: 'Title',
    field: `${this.props.type}.title`,
    width: 500,
    type: "string",
    renderCell: (valueReceived) => this.getImageorVideoLogo(valueReceived.row),
    sortComparator: this.titleSorting
   }


titleSorting = (a,b)=>{
       console.log(a);
       console.log(b);
}

数据网格：

               <DataGrid
                    rows={rowsDataGrid}
                    columns={columnsDataGrid}
                    components={{
                        Toolbar: this.getSearchTextField
                    }}
                    pageSize={5}
                    rowsPerPageOptions={[5]}
                   
                    // checkboxSelection
                    // disableSelectionOnClick
                    autoHeight
                />

问题两个控制台打印未定义理想情况下，它应该给出整行 a 和行 b 或至少行 a 列数据和行 b 列数据

Answer 1

尝试使用自定义字段和 valueGetter 参数：

{ 
    headerName: 'Title',
    field: "CustomField,
    valueGetter: () => this.props.type.title,
    width: 500,
    type: "string",
    renderCell: (valueReceived) => this.getImageorVideoLogo(valueReceived.row),
    sortComparator: this.titleSorting
}

并在比较器函数中添加比较算法，例如

const titleSorting = (a, b) => {
   a - b;
}