如何在MUI X Data Grid非Pro版实现列宽适配内容无截断

MUI X Data Grid社区版（非Pro）没有内置的自动列宽功能，但可以自行实现逻辑，让列宽匹配表头和单元格的最长文本内容，避免内容截断。

实现思路 #

通过计算每列表头和所有单元格文本的实际渲染宽度，取两者的最大值（额外加内边距避免内容拥挤），然后动态更新列配置的width属性。

具体实现步骤 #

1. 编写文本宽度计算工具函数
   用Canvas计算文本渲染后的真实宽度，这是最精准的方式：

const calculateTextWidth = (text, fontStyle) => {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  context.font = fontStyle;
  return context.measureText(text || '').width;
};

2. 在组件中动态计算并设置列宽
   在组件挂载或数据更新时，遍历列和数据，计算每列的最大宽度：

import { DataGrid } from '@mui/x-data-grid';
import { useEffect, useState } from 'react';

const AutoWidthDataGrid = ({ columns, rows }) => {
  const [adjustedColumns, setAdjustedColumns] = useState(columns);

  useEffect(() => {
    // 匹配Data Grid默认字体样式，可根据你的自定义样式调整
    const fontStyle = '14px Roboto, Helvetica, Arial, sans-serif';
    const columnPadding = 24; // 对应Data Grid默认的列内边距

    const updatedColumns = columns.map(column => {
      // 计算表头文本宽度
      const headerWidth = calculateTextWidth(column.headerName, fontStyle);
      // 计算该列所有单元格的最大文本宽度
      const maxCellWidth = rows.reduce((maxWidth, row) => {
        const cellContent = row[column.field]?.toString() || '';
        const cellWidth = calculateTextWidth(cellContent, fontStyle);
        return Math.max(maxWidth, cellWidth);
      }, 0);
      // 取表头和单元格的最大值，加上内边距作为最终列宽
      const finalWidth = Math.max(headerWidth, maxCellWidth) + columnPadding;
      return { ...column, width: finalWidth };
    });

    setAdjustedColumns(updatedColumns);
  }, [columns, rows]);

  return <DataGrid columns={adjustedColumns} rows={rows} />;
};

export default AutoWidthDataGrid;

注意事项 #

• 如果使用了renderCell自定义单元格内容，需要调整计算逻辑，确保取到渲染后的实际文本（而非原始字段值）。
• 数据量极大时，全量计算单元格宽度可能有性能损耗，可改为只计算可见行，或添加防抖处理。
• 可根据实际需求修改columnPadding和fontStyle，确保与你的表格样式匹配。

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