Estoy usando un componente de paginación de tabla Material-UI en mi aplicación React y tengo que colocar el párrafo que muestra el rango actual de filas entre los dos botones de acción (anterior y siguiente)
<TablePagination rowsPerPageOptions={[]} component="div" count={rows} page={page} onPageChange={handleChangePage} rowsPerPage={rowsPerPage} onRowsPerPageChange={handleChangeRowsPerPage} />No hay una forma sencilla de hacerlo.
Un enfoque sería manipular algunas de las clases css de MUI dándole a su TablePagination el siguiente sx-prop:
sx={{ "&.MuiTableCell-root .MuiTablePagination-displayedRows": { position: "absolute", right: "50px", }, "&.MuiTableCell-root .MuiTablePagination-actions button:first-of-type": { mr: "100px", }, }}Esto moverá el primer botón de acción a la izquierda y las filas mostradas a la derecha.