MUI DataGrid自适应高度需求实现问题求助

需求 #

我使用MUI的DataGrid组件，需要实现以下两种场景的自适应：

• 行数较少时，表格高度完全适配内容，无多余空白
• 行数过多超出布局可用空间时，表格通过flex: 1占满剩余空间，多余行在表格内部滚动

当前困境 #

目前只能单独实现其中一种效果：

• 开启autoHeight属性：少行场景显示正常，但多行时会导致整个容器滚动，而非表格内部行滚动
• 关闭autoHeight并将DataGrid包裹在flex: 1容器中：多行场景可内部滚动，但少行时表格会填满容器，行下方出现空白

已尝试的无效方案 #

试过多种高度与flex组合，均未达到预期：

• 给开启autoHeight的表格设置maxHeight，并修改.MuiDataGrid-main { overflow: scroll; }：少行场景正常，但固定maxHeight不符合弹性布局需求
• 关闭autoHeight，给.MuiDataGrid-main设置flex-grow: 0：行直接收缩至高度0，完全消失

解决方案 #

核心思路是结合autoHeight的自适应特性，通过CSS限制表格最大高度并启用内部滚动，同时利用flex布局让表格在多行时占满可用空间。

修改后的组件代码 #

const S = {
  Wrapper: styled.div`
    width: 100%;
    display: flex;
    flex-direction: column; // 垂直方向布局，确保表格高度适配
    flex: 1;
    background: white;
    border: solid thick red;
  `,
  DataGrid: styled(DataGridPro)`
    && {
      // 允许表格在内容少时收缩，多时占满可用空间
      flex: 1 1 auto;
      max-height: 100%; // 限制最大高度不超过父容器
      // 内容超出时内部滚动
      .MuiDataGrid-main {
        overflow-y: auto;
      }
      background: lightgreen;
      font-size: 14px;
    }  
`,
};

type Props = {
  columns: ReadonlyColumns;
  rows: AnyObject[];
  filterModel?: GridFilterModel;
} & Omit<DataGridProps, 'columns'>;

const DataTable: React.FC<Props> = ({
  columns = [],
  rows = [],
  filterModel,
  className,
  ...props
}) => {
  const memoizedColumns = useMemo(
    () =>
      columns.map(col => ({
        headerClassName: 'columnHeader',
        flex: 1, // 所有列自动填充宽度
        ...col, // 可覆盖默认行为
      })),
    [columns],
  );

  return (
    <S.Wrapper className={className}>
      <S.DataGrid
        autoHeight // 保留自适应高度特性
        rows={rows}
        columns={memoizedColumns}
        filterModel={filterModel}
        {...props}
      />
    </S.Wrapper>
  );
};

方案说明 #

1. 父容器调整：将Wrapper的flex-direction设为column，确保表格在垂直方向上能正确响应flex布局
2. 表格样式调整：
   • flex:1 1 auto：让表格在父容器有多余空间时自动扩展，内容少时自动收缩
   • max-height:100%：限制表格最大高度不超过父容器的可用空间，避免撑爆容器
   • .MuiDataGrid-main { overflow-y:auto }：当表格内容超出最大高度时，启用内部垂直滚动
3. 保留autoHeight：确保行数较少时，表格高度完全适配内容，无多余空白

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