Material UI：给 TableBody 一个最大高度并使其垂直可滚动

Question

使用 Material UI，我希望 Table 的 TableBody 的最大高度为 500px。如果有任何行无法容纳在 TableBody 的高度内，则 TableBody 应垂直滚动，同时 TableHead 锁定到位（冻结）。

这是我的代码：

import React from "react";
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';

const data = ["1", "1","1","1","1","1","1","1","1","1","1","1","1","1"];

class Demo extends React.Component {
  render() {
    return (
      <div>
        <Table>
          <TableHead>
            <TableRow style={{ 'backgroundColor': '#f5f5f5', "height": '35px' }}>
              <TableCell>Column 1</TableCell>
              <TableCell>Column 2</TableCell>
              <TableCell></TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map(n => {
              return (
                <TableRow key={n}>
                  <TableCell>{n}</TableCell>
                  <TableCell>{n}</TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </div>
    );
  }
}

export default Demo;

工作示例：https : //codesandbox.io/s/y03vmkkkqj

如何在 Material UI 中做到这一点？

请从我的示例中分叉并提供指向工作解决方案的链接。

Answer 1

您可以stickyHeader在Table组件中使用prop并提供maxHeight给TableContainer.

<TableContainer style={{ maxHeight: 150 }}>
  <Table stickyHeader>
    <TableHead>
      <TableRow style={{ 'backgroundColor': '#f5f5f5', "height": '35px' }}>
        <TableCell>Column 1</TableCell>
        <TableCell>Column 2</TableCell>
        <TableCell></TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {data.map(n => {
        return (
          <TableRow key={n}>
            <TableCell>{n}</TableCell>
            <TableCell>{n}</TableCell>
          </TableRow>
        );
      })}
    </TableBody>
  </Table>
</TableContainer>

这是material-ui 文档的官方演示。

Answer 2

不得不从主桌子上拉出桌子头，让身体滚动，但这是我最终做的。需要一些 CSS 才能使主体可滚动。

https://codesandbox.io/s/8kw39m1278

Answer 3

我已经通过设置max-height其父 div 使表格可滚动，但对于固定表格标题，它取决于您的列，并且样式与材料用户界面存在问题，我没有检查更多内容，但您可以在此处进一步调查：

固定标题： https: //codepen.io/tjvantoll/pen/JEKIu，http : //maxdesign.com.au/jobs/sample-fixed-thead/index.htm

CodeSandBox：https://codesandbox.io/s/x92qwnko