Material UI v1 table with scroll (overflow: scroll)

Question

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.

Answer 1

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',
  },
});

The paper class is applied to the root element:

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

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

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.