javascript - 自定义渲染单元格数据网格 Material UI 的自定义排序

Question

我正在使用 Material UI V4 Data Grid React Js 应用程序中的组件。Data Grid组件需要rows ( list 类型)和 columns ( list 类型) Prop 。
这是一个行元素的示例:

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 的列实现自定义排序 field ？
例如，汽车型号名称列(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