MUI DataGrid 中的自动高度答案

【问题标题】：Autoheight in MUI DataGridMUI DataGrid 中的自动高度
【发布时间】：2022-08-16 07:23:54
【问题描述】：

我正在使用 MUI DataGrid 组件，我希望拥有的行为是：

当行数较少时，表的大小仅为这些行所需的大小。
当存在大量行时，超过当前视口可以容纳的行数（考虑到屏幕上的其他内容），表格会占用布局中的可用空间（考虑到其flex: 1）和额外的行在表格内滚动。
我可以实现这些行为中的每一个，但一次只能实现一个。
1. 如果我在DataGrid 上使用autoHeight 属性，那么表格将尽可能小。但它也将尽可能大，所以如果有大量的行容器滚动整个表格，而不是表格内滚动的行。
2. 如果我不使用autoHeight，并将DataGrid 包装在带有flex: 1 的容器中，那么表格将增长以填满可用空间，并且行将在表格中滚动。但是只有几行的表格也会增长以填充其容器，因此行下方有空白空间（在页脚上方，\“表格行：#\”）
  
  您可以在此屏幕截图中看到情况，显示完全相同的页面，但数据不同。
  
  我尝试过在阳光下各种高度和弯曲的感觉。例如：
  - 用 maxHeight （和 .MuiDataGrid-main { overflow: scroll; } ）设置 autoHeight 可以让几行变小，而多行不要太小，但显然任何离散的 maxHeight，无论是 px 还是 %，都不是我要去的flexible 布局。
  - 关闭 autoHeight（如场景 #2）并在表中的行容器 (.MuiDataGrid-main) 上设置 flex-grow: 0 只会使行消失，因为它们随后会缩小到 0 的高度。
  组件的代码：
```
const S = {
  Wrapper: styled.div`
    width: 100%;
    display: flex;
    flex: 1;
    background: white;
    border: solid thick red;
  `,
  DataGrid: styled(DataGridPro)`
    && {
      .MuiDataGrid-main {
        //overflow: scroll;
        //flex-grow: 0;
      }
      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, // all columns expand to fill width
        ...col, // but could override that behavior
      })),
    [columns],
  );

  return (
    <S.Wrapper className={className}>
      <S.DataGrid
        // autoHeight
        rows={rows}
        columns={memoizedColumns}
        filterModel={filterModel}
        {...props}
      />
    </S.Wrapper>
  );
};
```

【解决方案1】：

几天前我遇到了类似的问题，我解决了每次将新项目添加到我的行时重新计算行高的问题。

getRowHeight={(props: GridRowHeightParams) => {
      const serviceRowHeight = 45 // <-- default height, if I have no data for the row
      const addServiceBtnHeight = 45 // <-- a component that's always on the row
      const height = props.model?.services // services is each dynamic item for my row, so you should access like props.yourObj
        ? props.model.services.length * serviceRowHeight + addServiceBtnHeight
        : 115
      return height < 115 ? 115 : height // final height to be returned
    }}

【讨论】：