0
166
VistasMUI TablePagination agregando la capacidad de seleccionar el número de página
Estoy usando MUI TablePagination para crear paginación en mi tabla. El código funciona bien y obtengo la mayor parte de la funcionalidad que busco:
- La posibilidad de que los usuarios seleccionen, a través de un menú desplegable, 5, 10 o 20 usuarios por página determinada.
- Muestre dinámicamente el número de páginas en función del número seleccionado de usuarios por página.
Sin embargo, me falta esta funcionalidad y no estoy seguro de qué accesorio usar con este componente para lograr esto:
- La capacidad de los usuarios para navegar a una página seleccionada desde el número de páginas de resultados enumerados.
Como puedes ver en 
muestra 1-5 de 22, pero quiero dar a los usuarios la posibilidad de seleccionar una página como esta 
Aquí está mi código funcional:
<TablePagination rowsPerPageOptions={[5, 10, 20]} component="div" count={showUser.length} rowsPerPage={rowsPerPage} page={page} onPageChange={handleChangePage} onRowsPerPageChange={handleChangeRowsPerPage} />Quiero lograr esto sin eliminar la funcionalidad 1,2.
·
Santiago Trujillo
1 Respuestas
Responde la pregunta0
Como se mencionó en los comentarios anteriores, mi sugerencia sería utilizar el componente Pagination en lugar del componente TablePagination .
Esto requiere que maneje los tamaños de página usted mismo.
Esto debería ayudarte a llegar allí, adaptarlo a tus necesidades:
const Demo = () => { const data = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", ]; const [pageSize, setPageSize] = useState(2); const [page, setPage] = useState(1); const handlePage = (page) => setPage(page); const handlePageSizeChange = (event) => { setPageSize(event.target.value); }; const totalPages = Math.ceil(data.length / pageSize); const pageContent = data.slice((page - 1) * pageSize, page * pageSize); return ( <> <ul> {pageContent.map((item) => ( <li>{item}</li> ))} </ul> <select name="page-size" id="page-size" onChange={handlePageSizeChange}> <option value={2}>2</option> <option value={4}>4</option> <option value={6}>6</option> <option value={8}>8</option> <option value={10}>10</option> </select> <Pagination color="primary" count={totalPages} onChange={(event, value) => handlePage(value)} page={page} size="large" ></Pagination> </> ); }; export default Demo;
·
Santiago Trujillo
Denunciar
Responde la pregunta