Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

169
Vistas
Paginación personalizada en Material-Table

Quiero anular la paginación predeterminada en Material-Table para que se vea diferente, pero mantengo los mismos elementos predeterminados allí. Mi anulación me permite moverme entre las páginas de la tabla, pero no puedo cambiar cuántas filas aparecen en la tabla. Tampoco puedo saltar a la última ni a la primera página. Quiero mantener exactamente las mismas opciones que hay de forma predeterminada, pero cambiar su apariencia.

Todas mis importaciones de iconos, cuadrículas, tipografías, etc. son @material-ui/core/ o @material-ui/icons/

 function IntakeList() { const CustomPaginationComponent = (props) => { const { page, rowsPerPage, count, onChangePage } = props; let from = rowsPerPage * page + 1; let to = rowsPerPage * (page + 1); if (to > count) { to = count; } return ( <td> <Grid container alignItems="center" style={{ paddingTop: 8 }}> <Grid item> <IconButton disabled={page === 0} onClick={(e) => onChangePage(e, page - 1)}> <SkipPreviousIcon fontSize="small" color={page === 0 ? "disabled" : "primary"} /> <Typography>Prev</Typography> </IconButton> </Grid> <Grid item> <Typography variant="caption" style={{ color: "black" }}> {from}-{to} of {count} </Typography> </Grid> <Grid item> <IconButton disabled={to >= count} onClick={(e) => onChangePage(e, page + 1)}> <Typography>Next</Typography> <SkipNextIcon fontSize="small" color={to < count ? "primary" : "disabled"} /> </IconButton> </Grid> </Grid> </td> ); }; return ( <MaterialTable title="Title" data={data} columns={columns} options={{ pageSize: 10, pageSizeOptions: [10, 15, 25, 50, 100], }} components={{ Pagination: (props) => { return <CustomPaginationComponent {...props} />; }, }} /> ); }
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Lo que has hecho hasta ahora es correcto. Simplemente tiene que codificar para "saltar a la última página", "saltar a la primera página" y "seleccionar opciones de fila" tal como lo hizo para la página "siguiente" y "anterior".

https://codesandbox.io/s/solution-q1cmer?file=/src/App.js

Cuando registre en la consola los accesorios de paginación, obtendrá esto

ingrese la descripción de la imagen aquí

Usando las onChangeRowsPerPage rowsPerPageOptions parte del código que ha codificado, pude codificar la cantidad de filas por página.

Para ser honesto, no creo que tenga que codificar para la funcionalidad de next page y previous page . Ya está en accesorios. Simplemente tiene que declararlos en el lugar correcto.

Codificación feliz

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda