reactjs - React MUI X Datagrid component: filtering not working - Stack Overflow

admin管理员组

文章数量:1134248

I am using the MUIX Datagrid and filters are not refreshing the Datagrid data after filtering in one of the columns of the DataGrid component.

Here is my DataGrid code:

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

I have searched in other articles for solutions but none of the solutions solved the problem.

Probably one of you may have passed through similar problems and can help out.

Info from version in package.json:

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

Can you help?

Thanks

I am using the MUIX Datagrid and filters are not refreshing the Datagrid data after filtering in one of the columns of the DataGrid component.

Here is my DataGrid code:

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

I have searched in other articles for solutions but none of the solutions solved the problem.

Probably one of you may have passed through similar problems and can help out.

Info from version in package.json:

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

Can you help?

Thanks

• reactjs
• typescript
• material-ui

Share Improve this question Follow edited Jan 8 at 15:00 Miguel Isidoro asked Jan 7 at 18:00 Miguel IsidoroMiguel Isidoro 5144 bronze badges 1

• Problem solved. The problem was the getRowId={() => uuidv4()}, that I replaced with getRowId={(row) => row.id} – Miguel Isidoro Commented Jan 8 at 18:58

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Updated code of datagrid, solved the issue

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

本文标签： reactjsReact MUI X Datagrid component filtering not workingStack Overflow