Paginação

O componente de paginação permite ao usuário selecionar uma página específica a partir de um intervalo de páginas.

Paginação básica

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

Paginação 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 />

Paginação arredondada

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

Tamanho da paginação

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

Botões

Você pode habilitar opcionalmente os botões de primeira página e de última página, ou desabilitar botões de página anterior e de próxima página.

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

Intervalos de paginação

Você pode especificar quantos dígitos exibir a qualquer lado da página atual com a propriedade siblingRange, e adjacente ao número da página inicial e final com a propriedade 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} />

Paginação controlada

Page: 1

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

Integração com router

`usePagination`

For advanced customization use cases, we expose a headless usePagination() hook. Ele aceita quase as mesmas opções que o componente de paginação, menos todas as propriedades relacionadas à renderização de JSX. O componente de paginação usa este hook internamente.

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

Paginação em tabelas

O componente Pagination foi projetado para paginar uma lista de itens arbitrários quando a carga infinita não é usada. É preferível em contextos onde o SEO é importante, por exemplo, um blog.

Para a paginação de um conjunto grande de dados tabulares, você deve usar o componente TablePagination.

<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.

Você pode aprender mais sobre este caso de uso na seção de tabela da documentação.

Acessibilidade

ARIA

O nó raiz tem uma role de "navigation" e o rótulo aria-label "pagination navigation" por padrão. Os itens da página têm um rótulo aria-label que identifica a finalidade do item ("go to first page", "go to previous page", "go to page 1" etc.). Você pode substituir estes padrões usando a propriedade getItemAriaLabel.

Teclado

Os itens de paginação estão em ordem de tabulação, com um índice de tabulação iniciando em "0".