如何为MUI X DataTable添加加载Spinner且不设置父组件固定高度？

问题背景 #

使用MUI X DataGrid时遇到两难情况：

• 给外层div设置height: 300时，加载状态的Spinner能正常显示，但表格高度固定，无法随行数动态伸缩；
• 移除固定高度后，表格可以随行数自适应，但加载Spinner直接消失了。

需要同时实现两个需求：

1. 加载状态下正常显示Spinner
2. 表格高度随行数动态变化

原代码如下：

<div style={{height: 300}}>
    <DataGrid
          loading={true}
          getRowHeight={() => "auto"}
          getEstimatedRowHeight={() => 250}
          rows={rows}
          columns={gridColumns}
          initialState={{
            pagination: {
              paginationModel: { page: 0, pageSize: 50 },
            }
          }}
   />
</div>

解决方案 #

方法1：最小高度兜底（最简单） #

直接给DataGrid设置minHeight，去掉外层div的固定高度：

<div>
    <DataGrid
          loading={true}
          getRowHeight={() => "auto"}
          getEstimatedRowHeight={() => 250}
          rows={rows}
          columns={gridColumns}
          sx={{ minHeight: 200 }} // 加载时给表格兜底高度，Spinner有地方显示
          initialState={{
            pagination: {
              paginationModel: { page: 0, pageSize: 50 },
            }
          }}
   />
</div>

逻辑：加载时表格无数据，minHeight让容器保持足够空间显示Spinner；数据加载完成后，表格会随行数自动拉伸，不受minHeight限制。

方法2：自定义全局定位Spinner #

如果不想给表格加最小高度，可自定义加载组件，让Spinner脱离表格容器：

import { CircularProgress } from '@mui/material';

// 自定义加载覆盖层组件
const CustomLoadingOverlay = () => (
  <div style={{
    position: 'fixed',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    zIndex: 9999,
    backgroundColor: 'rgba(255,255,255,0.8)' // 可选，加半透明背景遮罩
  }}>
    <CircularProgress size={40} />
  </div>
);

// 使用自定义组件的DataGrid
<div>
    <DataGrid
          loading={true}
          getRowHeight={() => "auto"}
          getEstimatedRowHeight={() => 250}
          rows={rows}
          columns={gridColumns}
          slots={{ loadingOverlay: CustomLoadingOverlay }} // 替换默认加载组件
          initialState={{
            pagination: {
              paginationModel: { page: 0, pageSize: 50 },
            }
          }}
   />
</div>

逻辑：Spinner采用全屏固定定位，不管表格容器有没有高度，都能在屏幕居中显示，完全不依赖表格的高度设置。

方法3：结合autoHeight与条件式最小高度 #

利用DataGrid原生的autoHeight属性实现自适应，仅在加载状态下临时设置最小高度：

<div>
    <DataGrid
          loading={loading} // 假设loading是你的状态变量
          getRowHeight={() => "auto"}
          getEstimatedRowHeight={() => 250}
          rows={rows}
          columns={gridColumns}
          autoHeight // 开启自动高度，表格随行数伸缩
          sx={{
            ...(loading && { minHeight: 200 }) // 仅加载时添加最小高度
          }}
          initialState={{
            pagination: {
              paginationModel: { page: 0, pageSize: 50 },
            }
          }}
   />
</div>

逻辑：autoHeight让表格在有数据时完全自适应；加载状态下通过minHeight给Spinner提供显示空间，数据加载完成后自动移除该限制，最贴合需求。

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