MUI Data Grid Premium详情面板重复渲染问题求助

问题场景 #

使用MUI Data Grid Premium实现分组表格，按account和symbol两个字段对数据分组，通过getDetailPanelContent渲染嵌套表格作为分组详情区域。

目标效果：每个分组展开后仅显示一个嵌套详情表格
当前问题：当分组包含多个数据集时，详情面板会随每个子数据行重复渲染，同一分组下出现多个嵌套表格

现有代码 #

分组表格组件（GridSix.js） #

import * as React from "react";
import {
  DataGridPremium,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from "@mui/x-data-grid-premium";
import GridFive_Three from "./GridFive_Three";
import gridFive from "./GridFiveData";

import "./GridSix.css";

export default function GridSix() {
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ["account" , "symbol"],
      },
      aggregation: {
        model: {
          quantity: "sum",
          filledQuantity: "sum",
          unrealizedPNL: "sum",
          realizedPNL: "sum",
          totalPNL: "sum",
          qtyBought: "sum",
          qtySold: "sum",
          qtyShorted: "sum",
        },
      },
    },
  });

  const getDetailPanelContent = React.useCallback((params) => {
    return <GridFive_Three row={params.row.innerData} />;
  }, []);
  
  React.useEffect(() => {
    console.log(apiRef.current.getRowsCount())
  }, [apiRef.current])

  return (
    <div style={{ height: "100%", width: "100%" }}>
      <DataGridPremium
        apiRef={apiRef}
        columns={gridFive.columns}
        rows={gridFive.rows}
        disableRowSelectionOnClick
        initialState={initialState}
        getAggregationPosition={(groupNode) =>
          groupNode.depth === -1 ? null : "inline"
        }
        getDetailPanelContent={getDetailPanelContent}
      />
    </div>
  );
}

嵌套表格组件（GridFive_Three.js） #

import * as React from "react";
import { DataGridPremium } from "@mui/x-data-grid-premium";

export default function GridFive_Three({ row }) {
  return (
    <div className="grid-five-three" style={{ width: "100%" }}>
      <div style={{ height: 350, width: "100%" }}>
        <DataGridPremium
          {...row}
          initialState={{
            rowGrouping: {
              model: [""],
            },
          }}
          disableVirtualization
        />
      </div>
    </div>
  );
}

解决方案 #

问题根源在于getDetailPanelContent默认会为分组内的每一行子数据都渲染详情面板。要实现每个分组仅渲染一次详情，需判断当前行是否为分组根节点，而非分组内的子数据行。

修改getDetailPanelContent逻辑，通过params.row.isGroupNode属性筛选分组节点，同时可通过depth指定仅在目标分组层级渲染：

const getDetailPanelContent = React.useCallback((params) => {
  // 仅针对分组节点渲染详情面板
  if (params.row.isGroupNode) {
    // 可选：若需指定仅在第二级分组（symbol）渲染，添加判断：params.row.depth === 1
    return <GridFive_Three row={params.row.innerData} />;
  }
  // 非分组节点返回null，不渲染详情
  return null;
}, []);

params.row.innerData已包含当前分组下的所有子数据，直接传递给嵌套表格即可正常渲染完整的分组数据。

若需控制详情面板的展开/折叠行为，可配合getDetailPanelExpandedRowIds或detailPanelExpandedRowIds状态管理，确保每个分组仅展开一次。

内容的提问来源于stack exchange，提问作者Sharyar Anwer