使用React Material-Ui实现动态高度的粘性表头

Question

我正在使用Material-UI框架来呈现一个表格，想要让表头固定，但是我不想为表格设置高度，因为我希望它可以随着页面滚动。如果我没有在TableContainer上设置高度，以下代码片段将无法使表头固定。

https://codesandbox.io/s/winter-firefly-5wlx2?file=/src/App.js

import React from "react";
import {
  TableContainer,
  Table,
  TableHead,
  TableRow,
  TableCell
} from "@material-ui/core";
import "./styles.css";

export default function App() {
  return (
    <TableContainer>
      <Table stickyHeader>
        <TableHead>
          <TableRow>
            <TableCell>Value</TableCell>
          </TableRow>
        </TableHead>
        {
          Array(100).fill("Test").map((e) => <TableRow><TableCell>{e}</TableCell></TableRow>)
        }
      </Table>
    </TableContainer>
  );
}

- Dynamic

Answer 1

去掉TableContainer的overflow-x: auto，它就能正常工作。

const useStyles = makeStyles({
  customTableContainer: {
    overflowX: "initial"
  }
})

export default function App() {
  const classes = useStyles();
  return (
    <TableContainer classes={{root: classes.customTableContainer}}>
      <Table stickyHeader>
      
      ...

参考资料：https://css-tricks.com/dealing-with-overflow-and-position-sticky/

- 95faf8e76605e973

---

有没有办法在保持100%宽度的同时完成这个操作？ - Dynamic

我没有修改 TableContainer 的 width 属性 - 它仍然是 100%。如果你在我的代码中注释掉 overflowX: "initial"，你会发现它与你的沙盒非常相似，我所做的唯一区别是粘性标题。 - 95faf8e76605e973

让我重新表述一下：有没有办法在保持粘性标题的同时，使y方向可滚动，并使x方向在表格内可滚动，而不是随着页面一起滚动。 - Dynamic

这是完全可能的。请看看这个和这个。 - 95faf8e76605e973

非常感谢，我已经寻找这个修复方法两天了。 - Stanford

我在使用<Card>组件包裹<Table>时遇到了问题。在当前答案的基础上，以下解决方案适用于我：<Card sx={{overflow:"inherit"}}>，当然也要添加<Table stickyHeader>。 - G M

Answer 2

实际上我遇到了类似的问题，我希望我的表格高度可以占满整个可用空间，所以我将父标签的高度设置为100％，而不是表格的高度，然后在我的表格中使用父容器参考计算父容器的高度，实现方式可能是这样的：

// 1. create a ref
const tableContainerRef = useRef(null);

// 2. wait until the container ref is populated and retrieve the parents height
const containerMaxHeight = useMemo(() => {
  if (!tableFormRef.current) return null;

  return tableFormRef.current.parentElement.clientHeight;
}, [tableFormRef.current]);

// 3. use the height of the parent as your table's maxHeight
return (
  <div ref={tableContainerRef}>
    <TableContainer style={{maxHeight: containerMaxHeight}}>
      <Table>
       ...
      </Table>
    </TableContainer>
  </div>
);

- Juan Francisco Vazquez Torres

Answer 3

原来如果你只使用100vh而不是100%，它就可以工作了。

export default function App() {
  return (
    <TableContainer sx={{ maxHeight: "100vh" }}>
      <Table stickyHeader>

- Nithin Monni