如何在Material UI DataGrid中实现列宽自适应并添加横向滚动

当DataGrid列数过多时，默认会触发列宽自动压缩逻辑，导致内容截断：
#

实现思路 #

禁用DataGrid默认的列宽自适应填充规则，让列宽跟随单元格内容自动撑开，超出容器宽度时自动显示横向滚动条，效果与原生Table组件完全一致。

配置步骤 #

1. 列定义规则
   所有列不要设置固定width或flex属性，添加minWidth: 'auto'配置，让列宽随内容自动计算：

const columns = [
  { field: 'id', headerName: 'ID', minWidth: 'auto' },
  { field: 'name', headerName: '名称', minWidth: 'auto' },
  // 其余列配置保持一致，无需指定固定宽
]

2. DataGrid组件全局样式配置
   通过sx属性覆盖内置样式，实现内容溢出时自动出横向滚动条：

<DataGrid
  rows={rows}
  columns={columns}
  sx={{
    // 单元格不换行，避免内容折行
    '& .MuiDataGrid-cell': {
      whiteSpace: 'nowrap',
    },
    // 虚拟滚动容器最小宽度适配内容总宽度
    '& .MuiDataGrid-virtualScroller': {
      minWidth: 'fit-content',
    },
    // 数据行最小宽度适配内容总宽度
    '& .MuiDataGrid-row': {
      minWidth: 'fit-content',
    }
  }}
  // 可选：数据加载完成后自动适配列宽
  autosizeOnMount
/>

可选进阶配置 #

如果需要在数据动态更新时也自动适配列宽，可以通过网格API手动触发自适应：

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

function CustomGrid() {
  const apiRef = useGridApiRef();

  // 数据更新时触发列宽自适应
  useEffect(() => {
    if (rows.length && apiRef.current) {
      apiRef.current.autosizeColumns();
    }
  }, [rows, apiRef]);

  return (
    <DataGrid
      apiRef={apiRef}
      rows={rows}
      columns={columns}
      // 其余配置同上
    />
  )
}

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