Pagination

El componente de paginación permite al usuario seleccionar una página específica de un rango de páginas.

Paginación básica

<Pagination count={10} />
<Pagination count={10} color="primary" />
<Pagination count={10} color="secondary" />
<Pagination count={10} disabled />

Paginación delineada

<Pagination count={10} variant="outlined" />
<Pagination count={10} variant="outlined" color="primary" />
<Pagination count={10} variant="outlined" color="secondary" />
<Pagination count={10} variant="outlined" disabled />

Paginación redondeada

<Pagination count={10} shape="rounded" />
<Pagination count={10} variant="outlined" shape="rounded" />

Tamaño de paginación

<Pagination count={10} size="small" />
<Pagination count={10} />
<Pagination count={10} size="large" />

Botones

Opcionalmente puede activar los botones de primera página y última página, o desactivar los botones de página anterior y página siguiente.

<Pagination count={10} showFirstButton showLastButton />
<Pagination count={10} hidePrevButton hideNextButton />

Rangos de paginación

Puede especificar cuántos dígitos mostrar en ambos lados de la página actual con el prop siblingRange prop, y adyacente los números de página del comienzo y del final con el prop boundaryRange.

<Pagination count={11} defaultPage={6} siblingCount={0} />
<Pagination count={11} defaultPage={6} /> {/* Default ranges */}
<Pagination count={11} defaultPage={6} siblingCount={0} boundaryCount={2} />
<Pagination count={11} defaultPage={6} boundaryCount={2} />

Paginación Controlada

Page: 1

<Typography>Page: {page}</Typography>
<Pagination count={10} page={page} onChange={handleChange} />

Router integration

`usePagination`

For advanced customization use cases, we expose a headless usePagination() hook. It accepts almost the same options as the Pagination component minus all the props related to the rendering of JSX. The Pagination component uses this hook internally.

import { usePagination } from '@material-ui/core/Pagination';

Table pagination

The Pagination component was designed to paginate a list of arbitrary items when infinite loading isn't used. It's preferred in contexts where SEO is important, for instance, a blog.

For the pagination of a large set of tabular data, you should use the TablePagination component.

<TablePagination
  component="div"
  count={100}
  page={page}
  onPageChange={handleChangePage}
  rowsPerPage={rowsPerPage}
  onRowsPerPageChange={handleChangeRowsPerPage}
/>

⚠️ Note that the Pagination page prop starts at 1 to match the requirement of including the value in the URL, while the TablePagination page prop stats at 0 to match the requirement of zero-based JavaScript arrays that comes with rendering a lot of tabular data.

You can learn more about this use case in the table section of the documentation.

Accesibilidad

ARIA

The root node has a role of "navigation" and aria-label "pagination navigation" by default. The page items have an aria-label that identifies the purpose of the item ("go to first page", "go to previous page", "go to page 1" etc.). You can override these using the getItemAriaLabel prop.

Teclado

Los elementos de paginación están en orden de tabulación, con un índice de tabulación (tabindex) de "0".