Question

如何在Material UI v1（当前为v1-beta）中创建具有滚动溢出的表？在MUI文档中的组件演示中没有这样的示例。

Answer 1

在所有表示例中，都有一个类应用于div，其中包含配置水平滚动的Table。除非您使用足够小的视口查看文档，否则它并不明显。（见BasicTable.js）：

const styles = theme => ({
  paper: {
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
  },
});

paper类应用于根元素：

function BasicTable(props) {
  const classes = props.classes;

  return (
    <Paper className={classes.paper}>
      <Table>
        ...

如果您想要垂直滚动，则需要指定高度并包含overflow-y的注意事项。如果您想同时进行水平和垂直滚动，可以设置overflow并配置两个轴：

const styles = theme => ({
  paper: {
    height: 300,
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflow: 'auto',
  },
});

注意：这不会修复列标题，因为它已应用于容器。此调整将滚动条应用于整个表格 - 标题，正文，页脚等

Answer 2

为了固定表头并仅滚动表主体，我提出了此解决方案。

首先，我将component="div"属性添加到每个表组件中，以完全摆脱表框架的影响。

然后，我已将Table规则添加到TableHead，TableBody，TableCell和display: block，以覆盖实质性规则。

TableRow将获得display: flex。

TableBody将获得所需的固定(max-)height加上overflow: auto。

当然，通过使用div而不是表格标签，标题和主体单元格将丢失表格对齐方式。在我的情况下，我通过将固定的width设置为前几个单元格来解决此问题，对于标头中的第一个单元格和主体中的第一个单元格（或者也可以使用百分比）加上一个{{1} }。

第二个单元格得到flex-shrink: 0

注意：Material UI v1已使用

Answer 3

在表格上使用“ stickyHeader”属性，例如<Table stickyHeader>...</Table>