How to center out table on a Material UI Paper element

Question

The problem I have is I try to center out the fixed-sized table in the middle of the page (in a Paper component) and fail miserably. I am also quite new in Material-ui, so I am not sure this is a proper way for structuring this kind of items. Can you please help me centering it out in the middle of the page?

import rows from "./mockdata/mock_dashboard";
const rowsData = rows;

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%"
  },
  paper: {
    marginTop: theme.spacing(3),
    width: "100%",
    overflowX: "auto",
    marginBottom: theme.spacing(2),
    margin: "auto"
  },
  table: {
    minWidth: 650,
    maxWidth: 1200
  }
}));

export default function MainDashboard() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <Table className={classes.table} size="small">
          <TableHead>
            <TableRow>
              <TableCell>Nz.</TableCell>
              <TableCell>Data Przyjęcia</TableCell>
              <TableCell>Koordynator</TableCell>
              <TableCell>Link do Pliku</TableCell>
              <TableCell>Dod. opis</TableCell>
              <TableCell>Data Wykonania</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rowsData.map(row => (
              <TableRow key={row.orderNo}>
                <TableCell component="th" scope="row">
                  {row.orderNo}
                </TableCell>
                <TableCell align="center">{row.orderDate}</TableCell>
                <TableCell align="center">{row.coordinator}</TableCell>
                <TableCell align="center">{row.link}</TableCell>
                <TableCell align="center" className={classes.descriptionFont}>
                  {row.description}
                </TableCell>
                <TableCell align="center">{row.dueDate}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Paper>
    </div>
 );

Answer 1

What about wrapping table in fixed Container and get rid of fixed table width? It is basic element for Material-ui layout.

import Container from '@material-ui/core/Container';
import rows from "./mockdata/mock_dashboard";
const rowsData = rows;

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%"
  },
  paper: {
    marginTop: theme.spacing(3),
    width: "100%",
    overflowX: "auto",
    marginBottom: theme.spacing(2),
    margin: "auto"
  },
  table: {
    width: '100%',
  }
}));

export default function MainDashboard() {
  const classes = useStyles();

  return (
    <Container fixed>
      <Paper className={classes.paper}>
        <Table className={classes.table} size="small">
          <TableHead>
            <TableRow>
              <TableCell>Nz.</TableCell>
              <TableCell>Data Przyjęcia</TableCell>
              <TableCell>Koordynator</TableCell>
              <TableCell>Link do Pliku</TableCell>
              <TableCell>Dod. opis</TableCell>
              <TableCell>Data Wykonania</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rowsData.map(row => (
              <TableRow key={row.orderNo}>
                <TableCell component="th" scope="row">
                  {row.orderNo}
                </TableCell>
                <TableCell align="center">{row.orderDate}</TableCell>
                <TableCell align="center">{row.coordinator}</TableCell>
                <TableCell align="center">{row.link}</TableCell>
                <TableCell align="center" className={classes.descriptionFont}>
                  {row.description}
                </TableCell>
                <TableCell align="center">{row.dueDate}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Paper>
    </Container>
  );
}