如何让 MaterialUI XGrid 过滤器通过 renderCell 参数而不是后端数据进行过滤？

Question

我正在使用 MaterialUI XGrid 来显示信息行。目前，当我尝试过滤项目时，我无法按单元格显示的内容进行过滤，只能按后端行进行过滤。

例如，我有一个名为“上传状态”的列。在后端，显示值 In Progress、Succeeded 和 Failed 的值分别为 PENDING、PASS 和 FAIL。当我在前端进行过滤时，我无法按 In Progress、Succeeded 和 Failed 进行过滤，只能按后端值 PENDING、PASS 和 FAIL 进行过滤。如何更改使用 MaterialUI XGrid 过滤数据的方式？

这是上传状态栏的代码：

{
      field: "Upload Status",
      flex: 1,
      renderHeader: () => <FormattedMessage id={"Upload Status"} />,
      renderCell: (params) => {
        let parameter = params.row["Upload Status"];
        let cell = "";
        
        if (parameter === "PENDING") {
          cell = "In Progress";
        } else if (parameter === "PASS") {
          cell = "Succeeded";
        } else if (parameter === "FAIL") {
          cell = "Failed";
        }
        return (
          cell
        );
  },
},

这张图片显示了我希望它如何过滤，但它失败了。

这就是列的外观。

我希望第一张图片中的过滤器命令仅过滤到其上传状态单元格中具有“正在进行”的行。

Answer 1

renderCell 主要用于自定义渲染以添加其他元素，而不仅仅是渲染字符串。为了自定义显示的字符串，您应该改用valueGetter。在下面的示例中，数据包含UploadStatusCode，然后"Upload Status" 字段提供valueGetter 以将代码转换为要显示的文本。然后过滤作用于valueGetter返回的文本。

import * as React from "react";
import { DataGrid } from "@material-ui/data-grid";

const columns = [
  { field: "id", headerName: "ID", width: 90 },
  {
    field: "firstName",
    headerName: "First name",
    flex: 1,
    editable: true
  },
  {
    field: "lastName",
    headerName: "Last name",
    flex: 1,
    editable: true
  },
  {
    field: "Upload Status",
    headerName: "Upload Status",
    flex: 1,
    editable: false,
    valueGetter: (params) => {
      let parameter = params.row["UploadStatusCode"];
      let cell = "";

      if (parameter === "PENDING") {
        cell = "In Progress";
      } else if (parameter === "PASS") {
        cell = "Succeeded";
      } else if (parameter === "FAIL") {
        cell = "Failed";
      }
      return cell;
    }
  }
];

const rows = [
  { id: 1, lastName: "Snow", firstName: "Jon", UploadStatusCode: "PENDING" },
  {
    id: 2,
    lastName: "Lannister",
    firstName: "Cersei",
    UploadStatusCode: "PASS"
  },
  {
    id: 3,
    lastName: "Lannister",
    firstName: "Jaime",
    UploadStatusCode: "FAIL"
  },
  { id: 4, lastName: "Stark", firstName: "Arya", UploadStatusCode: "PENDING" },
  {
    id: 5,
    lastName: "Targaryen",
    firstName: "Daenerys",
    UploadStatusCode: "PASS"
  },
  { id: 6, lastName: "Melisandre", firstName: null, UploadStatusCode: "PASS" },
  {
    id: 7,
    lastName: "Clifford",
    firstName: "Ferrara",
    UploadStatusCode: "PENDING"
  },
  {
    id: 8,
    lastName: "Frances",
    firstName: "Rossini",
    UploadStatusCode: "FAIL"
  },
  { id: 9, lastName: "Roxie", firstName: "Harvey", UploadStatusCode: "PASS" }
];

export default function DataGridDemo() {
  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        checkboxSelection
        disableSelectionOnClick
      />
    </div>
  );
}