自定义渲染单元数据网格材质 UI 的自定义排序

Question

我在 React Js 应用程序中使用Material UI V4 数据网格组件。

该Data Grid组件具有必需的rows( listtype) 和columns( listtype) 属性。

以下是行项目的示例：

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) => (
        <Typography variant="subtitle2" className={classes.bolderText}>
          {params.value.name}
        </Typography>
      )
    },
    {
      field: "location",
      headerName: "Location",
      flex: 1,
      minWidth: 300,
      renderCell: (params) => (
        <div>
          <Typography variant="subtitle2" className={classes.bolderText}>
            {params.value.name}
          </Typography>
          <Typography variant="subtitle2" className={classes.ligtherText}>
            {params.value.address}
          </Typography>
        </div>
      )
    }
  ];

如果我们Data Grid根据客户名称列对组件进行排序，则排序对于上升和下降都很好，如下图所示：

但是，对于具有字段（汽车型号和位置列）的列，排序效果不佳，render cell如下图所示：

那么如何对具有render cell字段的列实现自定义排序呢？ 例如，汽车型号名称列（Centurion、Centaur 和 Buffalo）和位置名称列（比利时、德国和西班牙）。

这是完整的代码https://codesandbox.io/s/stackoverflow-custom-sort-data-grid-material-ui-dp609

Answer 1

您可能已经猜到，使用renderCell，您需要创建一个自定义函数 ( sortComparator)，以便 DataGrid 知道如何对列进行排序。在你的情况下，这种类型可能就足够了：

    {
      field: "location",
      headerName: "Location",
      flex: 1,
      minWidth: 300,
      renderCell: (params) => (
        <div>
          <Typography variant="subtitle2" className={classes.bolderText}>
            {params.value.name}
          </Typography>
          <Typography variant="subtitle2" className={classes.ligtherText}>
            {params.value.address}
          </Typography>
        </div>
      ),
      sortComparator: (v1, v2) => v1.name.localeCompare(v2.name)
    }

工作示例：https://codesandbox.io/s/stackoverflow-custom-sort-data-grid-material-ui-forked-2kw12 ?file=/src/App.jsx:416-1248