Пользовательская сортировка для пользовательского интерфейса материала сетки данных ячейки рендеринга ⇐ CSS

[Anonymous]

Я использую компонент Data Grid Material UI V4 в приложении React Js.
Компонент Data Grid имеет обязательные строки (

Код: Выделить всё

listтип 

) и столбцы (

Код: Выделить всё

list

type).
Вот пример элемента строки:

Код: Выделить всё

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

а вот образец списка столбцов:

Код: Выделить всё

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}


)
}
];

Если мы сортируем компонент Data Grid на основе столбца имени клиента, сортировка работает нормально как для восходящего, так и для потомка, как мы можем видеть на изображениях ниже:




Однако сортировка не работает нормально для столбцов, в которых есть поле рендеринга (столбцы модели автомобиля и местоположения), как вы можете видеть на изображениях ниже:








Итак, как реализовать пользовательскую сортировку для столбцов, в которых есть отображаемая ячейка поле?
Например, столбец названия модели автомобиля (Centurion, Centaur и Buffalo) и столбец названия местоположения (Бельгия, Германия и Испания).
Вот полный код https://codesandbox.io/s/stackoverflow- ... l-ui-dp609

Подробнее здесь: https://stackoverflow.com/questions/703 ... aterial-ui