带有滚动的Material UI v1表(溢出:滚动) [英] Material UI v1 table with scroll (overflow: scroll)

问题描述

如何在Material UI v1(当前为v1-beta)中创建带有滚动溢出的表格?在MUI文档中的组件演示中，没有这样的示例.

How to create table with scroll overflow in Material UI v1 (v1-beta currently)? In component demos in MUI documentation there is no such example.

推荐答案

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

In all of the Table examples, there is a class applied to the div containing the Table that configures horizontal scrolling. It isn't apparent unless you're viewing the documentation with a sufficiently small viewport. (see 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，并且将配置两个轴:

If you want a vertical scroll, you'll need to specify a height and include considerations for overflow-y. If you want both horizontal and vertical scrolling, you can set overflow and both axes will be configured:

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

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

Note: This will not fix your column headings, because it is applied to the container. This adjustment will apply scrollbars to the entire table - heading, body, footer, etc.

这篇关于带有滚动的Material UI v1表(溢出:滚动)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！