reactjs - React MUI X Datagrid-komponent: filtrering fungerar inte

Jag använder MUIX Datagrid och filtren uppdaterar inte Datagrid-data efter filtrering i en av kolumnerna i DataGrid-komponenten.

Här är min DataGrid-kod:

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"
          }
        />

Jag har sökt i andra artiklar efter lösningar men ingen av lösningarna löste problemet.

Förmodligen har någon av er gått igenom liknande problem och kan hjälpa till.

Information från versionen i package.json:

"@mui/x-data-grid": "^7.22.0"

Kan du hjälpa?

Tack

Svar #1

Uppdaterad datagridkod, problemet löst

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

Relaterade artiklar