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

user_9985440 0
Viewed 6206

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'
 }
material-ui reactjs
5 Answers

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/ .

user_26318400

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>
user_57225050

Just write

<TablePagination style={{ display:"flex" }} .../>
user_44334980

If you just want to change alignment on a single pagination instance and not the whole app (using theme overrides as described by Maksym above):

apply a className to your TablePagination:

<TablePagination
  count={5}
  onChangePage={handleChangePage}
  page={page}
  rowsPerPage={perPage}
  rowsPerPageOptions={[]}
  className={classes.pagination}
/>

and define the pagination class like:

const useStyles = makeStyles((theme) => ({
  pagination: {
    "& .MuiTablePagination-spacer": {
      display: "none",
    },
  },
}));

this assumes you've defined classes inside your JSX.Element:

const classes = useStyles();
user_134205670

Thowing a padding=0px in there resolved it. After throwing in all the stuff above.

user_99854400
Related