MUI DataGridPro固定列时动态行高失效问题求助

使用Material-UI的DataGridPro组件，每行包含名称和数值数据，将名称列固定在左侧后，动态行高功能失效，名称单元格内容溢出，导致所有名称单元格与对应行错位。

当前使用的组件代码：

<DataGridPro
  density="compact"
  rows={rows}
  columns={columns}
  initialState={{
    pinnedColumns: { left: ['name'] },
  }}
  getRowHeight={() => 'auto'}
/>

已尝试MUI官方文档中动态行高配合固定列的解决方案，同时执行apiRef.current.resetRowHeights()也无法修复问题，行高计算错误出现在首次渲染阶段。

解决方案尝试 #

1. 提前计算行高并绑定到行数据

在渲染DataGridPro前，提前根据每行名称内容计算所需行高，将高度值存入对应row的height字段，然后修改getRowHeight逻辑：

// 示例：根据文本长度估算行高（可根据实际字体、列宽调整计算逻辑）
const calculateRowHeight = (text) => {
  const baseLineHeight = 20; // 对应compact密度的单行行高
  const maxCharsPerLine = 25; // 单行列宽可容纳的字符数
  const lineCount = Math.ceil(text.length / maxCharsPerLine);
  return baseLineHeight * lineCount;
};

// 预处理行数据，添加height字段
const processedRows = rows.map(row => ({
  ...row,
  height: calculateRowHeight(row.name)
}));

// 组件中使用
<DataGridPro
  density="compact"
  rows={processedRows}
  columns={columns}
  initialState={{
    pinnedColumns: { left: ['name'] },
  }}
  getRowHeight={(params) => params.row.height}
/>

2. 强制固定列单元格内容换行

给名称列添加自定义样式，确保内容自动换行，减少溢出导致的错位：

// columns配置中添加样式
const columns = [
  {
    field: 'name',
    headerName: '名称',
    pinned: 'left',
    style: {
      wordWrap: 'break-word',
      whiteSpace: 'pre-wrap',
      minHeight: '40px' // 保证最小行高，避免内容挤压
    }
  },
  // 其他列配置...
];

3. 延迟重置行高

利用apiRef在组件挂载后延迟执行行高重置，避开首次渲染的计算时机问题：

import { useGridApiRef } from '@mui/x-data-grid-pro';

const MyGrid = () => {
  const apiRef = useGridApiRef();

  useEffect(() => {
    const timer = setTimeout(() => {
      apiRef.current.resetRowHeights();
    }, 150); // 延迟时间可根据实际渲染速度调整
    return () => clearTimeout(timer);
  }, [apiRef]);

  return (
    <DataGridPro
      apiRef={apiRef}
      density="compact"
      rows={rows}
      columns={columns}
      initialState={{
        pinnedColumns: { left: ['name'] },
      }}
      getRowHeight={() => 'auto'}
    />
  );
};

4. 优化列宽度配置

确保名称列的宽度足够容纳内容，避免因宽度不足导致内容溢出：

const columns = [
  {
    field: 'name',
    headerName: '名称',
    pinned: 'left',
    width: 220, // 设置固定宽度
    // 或使用flex自适应剩余空间
    // flex: 1
  },
  // 其他列配置...
];

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