Get table pagination buttons and rows per page to the left on Material UI

Question

Have a site that I am trying to shrink down the table to fit on a mobile screen and grow when necessary. I am able to get it to shrink and to drop the horizontal scroll bars, however, the footer is giving me issues. The footer content doesn't seem to follow along with the rest. It appears that it is part of their code to have it align right. Is there anyway to change this?

Code:

    <TableFooter classes={classes.footer}>
    <div className={classes.footer}></div>
        <TablePagination
          className={classes.footer}
          colSpan={1}
          count={data.length}
          rowsPerPage={rowsPerPage}
          page={page}
          onChangePage={this.handleChangePage}
          onChangeRowsPerPage={this.handleChangeRowsPerPage}
          ActionsComponent={TablePaginationActionsWrapped}
        />
    </TableFooter>

 footer:{
  justifyContent: 'left',
  width: "10px",
  textAlign: 'left'
 }

Answer 1

Buttons are pushed to the left using a 100% width div spacer. You can override this spacer to have no width. Here is quick-and-dirty:

.MuiTablePagination-spacer {
      flex: none !important;
}

A better way is to define a table-specific (or app-wide) override in a theme:

import { ThemeProvider } from "@material-ui/styles";
import { createMuiTheme } from '@material-ui/core/styles';
...
const tableTheme = createMuiTheme({
  overrides: {
    MuiTablePagination: {
      spacer: {
        flex: 'none'
      }
    }
  }
});
...
<ThemeProvider theme={tableTheme}>
  <Table>
    ...
  </Table>    
</ThemeProvider>

For more information on the supported styles, head over here https://next.material-ui.com/es/api/table-pagination/ .

Answer 2

For me it was enough to set width: '10px' in TablePagination style property, however my structure differs a little:

<Paper>
    <Table>
        <TableHead>
            ...
        </TableHead>
        <TableBody>
            ...
        </TableBody>
    </Table>
    <TablePagination style={{width:'10px'}} .../>
</Paper>