Sorting not working for MUI Data Grid: Data Grid sortComparator giving undefined

user_10602700 0
Viewed 393

I am trying to sort data with nested values in a data grid But getting undefined on sortComparator of Data Grid Columns

Code: Column Data Setup:

   { 
    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);
}

Data Grid:

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

Problem both console print undefined Ideally it should give either the whole row a and row b or atleast row a column data and row b column data

material-ui reactjs javascript
1 Answers

Try with a custom field and the valueGetter param :

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

And add a comparison algorithm in your comparator function such as

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