CODEWITHSUNDEEP
reactjsmaterial-ui
lakerskill
lakerskill

Reputation: 1079

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

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'
 }

Upvotes: 3

Views: 10511

Answers (6)

Tom Stambaugh
Tom Stambaugh

Reputation: 1039

While it may be really stupid, the solution that works for me today (11-Sep-2024) is the following:

<TablePagination
    style={{width:'25rem'}}
    rowsPerPageOptions={PAGE_SIZE_OPTIONS}
    component="div"
    count={lineCount}
    rowsPerPage={pageSize}
    page={pageIndex}
    onPageChange={handleChangePageEvent_pageIndex_}
    onRowsPerPageChange={handleChangeRowsPerPageEvent_}
/>

I know this is a hack, but it locates the TablePagination element on the left where it is always visible. I used trial-and-error to find a hard-coded width that works.

Also, FWIW, regarding the top-rated answer above, I get a warning that says that createMuiTheme has been deprecated in favor of createTheme.

Upvotes: 0

Scott Norland
Scott Norland

Reputation: 199

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

Upvotes: 0

Maksym
Maksym

Reputation: 1498

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

Upvotes: 5

Piyush
Piyush

Reputation: 3275

Just write

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

Upvotes: 2

Egan Wolf
Egan Wolf

Reputation: 3573

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>

Upvotes: 3

lakerskill
lakerskill

Reputation: 1079

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

Upvotes: -1

Related Questions