MUI X DataGrid列筛选功能失效问题求助

使用@mui/x-data-grid@7.22.0版本的DataGrid组件时，执行列筛选操作后，表格数据未出现预期的刷新更新。以下是原实现代码：

const [dataRows] = useObservable(repository.allTransfers$);

const columns = [
{
  field: "serviceId",
  headerName: t("ID"),
  width: 100,
  filterable: true,
},
{ field: "date", headerName: t("Date") },
{ field: "vehicleType", headerName: t("Vehicle Type") },
{
  field: "reference",
  headerName: t("References"),
  width: 365,
},
{ field: "code", headerName: t("Code") },
{
  field: "action",
  headerName: "Action",
  width: 275,
  sortable: false,
  renderCell: (params: any) => {
    const row = params.row as Row;
    const onClickIntegrateWithExternalSystem = () => {
      if (row) {
        uploadTransferManifest(row);
      }
    };
    if (row && row.integrationStatus !== INTEGRATED) {
      return (
        <>
          <div>
            <Button onClick={onClickIntegrateWithExternalSystem}>
              {t("Integrate")}
            </Button>
          </div>
        </>
      );
    }
  },
},
{
  field: "integrationStatus",
  headerName: t("Integration Status"),
  width: 155,
  valueGetter: (params: any) => {
    return t(params);
  },
},
{
  field: "integrationDate",
  headerName: t("Integration Date"),
  width: 140,
  valueGetter: (params: any) => {
    return params ? format(params, "yyyy-MM-dd HH:mm") : "";
  },
},
{
  field: "reference",
  headerName: t("Reference"),
  width: 300,
},
];

<DataGrid
          rows={dataRows}
          columns={columns}
          disableColumnFilter={false}
          pagination
          rowCount={dataRows.length}
          getRowId={() => uuidv4()}
          getRowClassName={(params) =>
            params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd"
          }
        />

问题根源分析 #

1. getRowId生成不稳定的唯一标识：当前getRowId每次渲染都会生成新的UUID，导致DataGrid无法持久化识别行的唯一性，筛选操作后无法正确匹配和更新行数据。
2. 重复列字段冲突：columns数组中存在两个field: "reference"的列，字段重复会干扰DataGrid内部的状态管理，影响筛选功能正常触发。
3. 手动固定rowCount：开启分页时手动设置rowCount={dataRows.length}，筛选后数据长度变化但该值未同步更新，导致表格无法正确渲染筛选后的结果。

解决方案 #

1. 使用行数据中的唯一字段作为getRowId：
   替换自动生成UUID的逻辑，改用每行数据中固有的唯一标识，比如serviceId：

   getRowId={(row) => row.serviceId}
   

2. 删除重复列：
   移除其中一个reference字段的列，确保每个列的field属性唯一。
3. 移除手动设置的rowCount：
   DataGrid会自动根据rows的长度计算分页所需的rowCount，无需手动指定，删除rowCount={dataRows.length}。

修改后的完整代码示例 #

const [dataRows] = useObservable(repository.allTransfers$);

const columns = [
{
  field: "serviceId",
  headerName: t("ID"),
  width: 100,
  filterable: true,
},
{ field: "date", headerName: t("Date") },
{ field: "vehicleType", headerName: t("Vehicle Type") },
{
  field: "reference",
  headerName: t("References"),
  width: 365,
},
{ field: "code", headerName: t("Code") },
{
  field: "action",
  headerName: "Action",
  width: 275,
  sortable: false,
  renderCell: (params: any) => {
    const row = params.row as Row;
    const onClickIntegrateWithExternalSystem = () => {
      if (row) {
        uploadTransferManifest(row);
      }
    };
    if (row && row.integrationStatus !== INTEGRATED) {
      return (
        <>
          <div>
            <Button onClick={onClickIntegrateWithExternalSystem}>
              {t("Integrate")}
            </Button>
          </div>
        </>
      );
    }
  },
},
{
  field: "integrationStatus",
  headerName: t("Integration Status"),
  width: 155,
  valueGetter: (params: any) => {
    return t(params);
  },
},
{
  field: "integrationDate",
  headerName: t("Integration Date"),
  width: 140,
  valueGetter: (params: any) => {
    return params ? format(params, "yyyy-MM-dd HH:mm") : "";
  },
},
];

<DataGrid
          rows={dataRows}
          columns={columns}
          disableColumnFilter={false}
          pagination
          getRowId={(row) => row.serviceId}
          getRowClassName={(params) =>
            params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd"
          }
        />

内容的提问来源于stack exchange，提问作者Miguel Isidoro