javascript - 如何使 Material-UI Table 保持动态高度的可滚动性？

Question

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

简短:

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

长:

我在 Reactjs 中有一个简单的 Web 应用程序，它由一个页眉、一个主体(表格所在的位置)和一个页脚组成。我的 App 组件的样式是按如下方式分发这三个基本布局组件:

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

这很好用。我的主体组件占用了所有可用空间来填充整个视口(viewport)。该组件如下所示:

<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">
 [...]

我的表格组件的 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 中的所有可用空间并变得可滚动。如果我将 container 的 maxHeight 设置为固定像素值，表格将变为可滚动且不会溢出。如果我这样离开，表格就会溢出，用户必须滚动才能到达页面末尾。

谁能告诉我如何设置容器的高度以 100% 适合其父容器而不让我的表格溢出？

Answer 1

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

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

您可以在这个 docs 中查看更多详细信息