Question

使用Material UI，我希望表格的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道具，并将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文档中的官方demo。

Answer 2

不得不将表头从主表中拉出以允许主体滚动，但这就是我最终要做的。要使主体可滚动，需要一些CSS。

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

Answer 3

我通过为其父div设置max-height来使表格可滚动，但是对于固定的表格标题，它取决于您的列，并且样式存在Material-ui问题，我没有做更多检查但您可以在此处进行进一步调查：

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

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

材质用户界面：为TableBody提供最大高度并使其垂直滚动

3 个答案: