how to adjust react material ui pagination spacing/width on smaller screens

Question

I am using react-material ui pagination component where I have rows per page option along with forward,backward,first_page and last_page options like shown below

Pagination render code:

<TablePagination
        component="div"
        rowsPerPageOptions={[10, 20, 50, 100]}
        colSpan={20}
        count={totalProducts}
        rowsPerPage={rowsPerPage}
        page={page}
        labelRowsPerPage="Rows per page"
        SelectProps={{
          inputProps: { "aria-label": "rows per page" },
          native: true
        }}
        onChangePage={this.handleChangePage}
        onChangeRowsPerPage={this.handleChangeRowsPerPage}
        ActionsComponent={subProps => (
          <Pagination {...subProps} totalProducts={totalProducts} />
        )}
      />

Is there a way where for smaller screens, I can hide the rows per page option or move the pagination component towards left. Basically making the component responsive

Thanks

Answer 1

I think just removing the rows per page will help your cause.

From the documentation for rowsPerPageOptions

Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed.

So basically, if you pass rowsPerPageOptions={[]} should do the trick.

You can use Hidden to toggle between those as below.

Example

<>
  <Hidden smUp>
   <TablePagination
     rowsPerPageOptions={[]}
     component="div"
     count={rows.length}
     rowsPerPage={rowsPerPage}
     page={page}
     onChangePage={handleChangePage}
     onChangeRowsPerPage={handleChangeRowsPerPage}
   />
 </Hidden>
 <Hidden smDown>
   <TablePagination
   rowsPerPageOptions={[5, 10, 15, 20]}
   component="div"
   count={rows.length}
   rowsPerPage={rowsPerPage}
   page={page}
   onChangePage={handleChangePage}
   onChangeRowsPerPage={handleChangeRowsPerPage}
  />
 </Hidden>
</>

And the table is already responsive. Do let me know.