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 /><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 /><Pagination count={10} shape="rounded" />
<Pagination count={10} variant="outlined" shape="rounded" /><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} />Page: 1
<Typography>Page: {page}</Typography>
<Pagination count={10} page={page} onChange={handleChange} />usePagination
Para casos avançados de uso de customização, nós expomos um hook sem dependência, usePagination(). 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/lab/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}
/>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".