I'm attempting to organize data with nested values in a data grid, but I keep receiving 'undefined' on the 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
/>
The problem is that both consoles print 'undefined', whereas ideally it should display either the whole row 'a' and row 'b', or at least column data for row 'a' and row 'b'.