Benutzerdefinierte Sortierung für die Benutzeroberfläche des Datenrastermaterials für benutzerdefinierte Renderzellen ⇐ CSS

[Anonymous]

Ich verwende die Data Grid-Komponente von Material UI V4 in einer React Js-App.
Die Data Grid-Komponente verfügt über erforderliche Zeilen (

Code: Select all

list

Typ) und Spalten (

Code: Select all

list

Typ) Requisiten.
Hier ist ein Beispiel eines Zeilenelements:

Code: Select all

const rows = [
{
id: 1,
customerName: "Silvestr Irma",
carModel: {
name: "Centurion",
color: "red"
},
location: {
name: "Belgium",
address: "avenue Verheyen 93"
}
},
];

und hier ist ein Beispiel der Spaltenliste:

Code: Select all

const columns = [
{
field: "customerName",
headerName: "Custom Name",
flex: 1,
minWidth: 200
},
{
field: "carModel",
headerName: "Car Model",
flex: 1,
minWidth: 200,
renderCell: (params) => (

{params.value.name}

)
},
{
field: "location",
headerName: "Location",
flex: 1,
minWidth: 300,
renderCell: (params) => (


{params.value.name}


{params.value.address}


)
}
];

Wenn wir die Datenrasterkomponente basierend auf der Spalte „Kundenname“ sortieren, funktioniert die Sortierung sowohl für den aufsteigenden als auch für den absteigenden Teil einwandfrei, wie wir in den Bildern unten sehen können:




Die Sortierung funktioniert jedoch nicht einwandfrei für Spalten mit einem Renderzellen-Feld (Automodell- und Standortspalten), wie Sie in den Bildern unten sehen können:








Wie ich also eine benutzerdefinierte Sortierung für Spalten mit Renderzelle implementiert Feld?
Zum Beispiel die Spalte „Automodellname“ (Centurion, Centaur und Buffalo) und die Spalte „Standortname“ (Belgien, Deutschland und Spanien).
Hier ist der vollständige Code https://codesandbox.io/s/stackoverflow- ... l-ui-dp609