How to center out table on a Material UI Paper element - reactjs

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