MUI X Data Grid弹性列适配内容最小宽度实现方案咨询

针对你需求的核心——让flex布局的列既能填充可用空间，又能保证邮件列不截断文本（最小宽度匹配最长内容），同时在表格尺寸不足时触发横向滚动，这里有两种可行方案：

方案一：动态计算内容宽度设置minWidth #

因为Data Grid的minWidth只接受数值，我们可以通过代码提前计算出邮件列最长内容的实际渲染宽度，再把这个值赋值给列的minWidth属性：

1. 写一个计算函数，用隐藏DOM元素模拟单元格样式渲染最长文本，获取其宽度：

const getEmailMinWidth = (rowData) => {
  // 找出最长的邮件文本
  const longestEmail = rowData.reduce((prev, curr) => 
    curr.email.length > prev.length ? curr.email : prev, '');
  
  // 创建临时元素匹配单元格样式
  const tempEl = document.createElement('div');
  tempEl.style.fontSize = '14px'; // 匹配Data Grid默认字体大小
  tempEl.style.padding = '0 16px'; // 匹配单元格左右内边距
  tempEl.style.whiteSpace = 'nowrap';
  tempEl.style.visibility = 'hidden';
  tempEl.style.position = 'absolute';
  tempEl.textContent = longestEmail;
  
  document.body.appendChild(tempEl);
  const width = tempEl.offsetWidth;
  document.body.removeChild(tempEl);
  
  return width;
};

2. 在组件中计算并设置到列配置：

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

// 假设你的数据源是rowData
const [emailMinWidth, setEmailMinWidth] = useState(0);

useEffect(() => {
  if (rowData.length) {
    setEmailMinWidth(getEmailMinWidth(rowData));
  }
}, [rowData]);

const columns = [
  // 其他列配置
  {
    field: 'email',
    headerName: '邮件',
    flex: 1,
    minWidth: emailMinWidth,
    renderCell: (params) => <div style={{ whiteSpace: 'nowrap' }}>{params.value}</div>
  }
];

// 渲染Data Grid
return <div style={{ height: 400, width: '100%' }}><DataGrid rows={rowData} columns={columns} /></div>;

方案二：用CSS的min-content强制列最小宽度 #

通过自定义CSS类，给邮件列的单元格设置min-width: min-content，配合white-space: nowrap来保证文本不换行，同时让列的最小宽度由内容决定：

1. 添加自定义CSS：

.email-column .MuiDataGrid-cell,
.email-column .MuiDataGrid-columnHeader {
  white-space: nowrap;
  min-width: min-content;
}

2. 在列配置中应用该类：

const columns = [
  // 其他列
  {
    field: 'email',
    headerName: '邮件',
    flex: 1,
    className: 'email-column',
  }
];

注意事项 #

• 确保Data Grid的容器宽度设置为100%，且容器的父元素在空间不足时不会挤压表格，这样表格才会触发横向滚动。
• 两种方案都不需要依赖MUI X Data Grid的Pro版本，MIT许可版本完全支持。

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