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}
                    ponents={{
                        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

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}
                    ponents={{
                        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

• javascript
• reactjs
• material-ui
• mui-x-data-grid

Share Improve this question Follow edited Mar 27 at 7:25 Olivier Tassinari 8,69166 gold badges2525 silver badges2828 bronze badges asked May 18, 2022 at 5:53 ash1102ash1102 45711 gold badge55 silver badges2222 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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 parison algorithm in your parator function such as

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