如何使 Material-UI Table 保持可滚动且具有动态高度？

Question

我对 Material-UI Table 组件及其大小和可滚动性有疑问。

短的：

如果 Material-UI 表格组件的父组件具有固定大小，则该组件只能滚动。如果我将大小设置为 100% 适合父级，则会溢出。

长的：

我在 Reactjs 中有一个简单的 Web 应用程序，它由标题、正文（表格所在的位置）和页脚组成。我的应用程序组件的样式被设计为分布这三个基本布局组件，如下所示：

const useStyles = makeStyles((theme) => ({
  root: {
    height: "100vh",
    maxHeight: "100vh",
    display: "grid",
    gridTemplateRows: "auto 1fr auto",
  },
}));

效果很好。我的身体组件占据了所有可用空间来填充整个视口。该组件如下所示：

<div className={classes.root}>
   <Controls /> //just some buttons, arranged in one line
   <Table /> //my table component, which uses pagination
</div>

该表本身使用分页，并且默认每页 10 行。

它的 CSS 看起来像这样：

root: {
    maxHeight: "100%",
    display: "grid",
    gridTemplateRows: "min-content 1fr",
    gap: "25px",
  },

表组件本身如下所示：

<div className={classes.root}>
      {loading ? loadingAlert : <></>}
      <Paper elevation={3} className={classes.tableRoot}>
        <TableContainer className={classes.container}>
          <Table size="small" stickyHeader aria-label="sticky table">
 [...]

我的 Table 组件的 CSS 如下所示：

const useStyles = makeStyles({
  root: {
    maxHeight: "100%",
  },
  tableRoot: {
    width: "100%",
    maxHeight: "100%",
  },
  container: {
    maxHeight: "100%", <---
  },
  footer: {
    display: "grid",
    gridTemplateColumns: "1fr min-content",
  },
});

当用户将每页显示的行数从 10 更改为 25 时，表格的高度就会发生变化。在这种情况下，我希望该表占据其中的所有可用空间body并变得可滚动。如果我将容器的 maxHeight 设置为固定像素值，则表格将变得可滚动并且不会溢出。如果我这样保留它，表格就会溢出，用户必须滚动才能到达页面末尾。

谁能告诉我如何设置容器的高度以使其 100% 适合其父容器而不会使桌子溢出？

Answer 1

如果你使用Material UI的DataGrid，你可以使用一个名为autoHeight的prop

<DataGrid autoHeight {...data} />
<p>more content</p>

您可以在本文档中查看更多详细信息