I am using a Material-UI table pagination component in my React app and i have to place the paragraph which displays the current range of rows between the two action buttons (previous and next)
<TablePagination
rowsPerPageOptions={[]}
component="div"
count={rows}
page={page}
onPageChange={handleChangePage}
rowsPerPage={rowsPerPage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
There is no straightforward way of doing it.
One approach would be to manipulate some of the MUI css classes by giving your TablePagination following sx-prop:
sx={{
"&.MuiTableCell-root .MuiTablePagination-displayedRows": {
position: "absolute",
right: "50px",
},
"&.MuiTableCell-root .MuiTablePagination-actions button:first-of-type":
{
mr: "100px",
},
}}
This will move the first action button to the left and the displayed rows to the right.