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} />
<Pagination count={10} color="primary" />
<Pagination count={10} color="secondary" />
<Pagination count={10} disabled />

Press Enter to start editing

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

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

Press Enter to start editing

Paginação arredondada

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

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

Press Enter to start editing

Tamanho da paginação

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

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

Press Enter to start editing

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

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

Press Enter to start editing

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={10}
  renderItem={(item) => (
    <PaginationItem
      slots={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
      {...item}
    />
  )}
/>

<Pagination
  count={10}
  renderItem={(item) => (
    <PaginationItem
      slots={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
      {...item}
    />
  )}
/>

Press Enter to start editing

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} />

<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} />

Press Enter to start editing

Paginação controlada

Page: 1

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

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

Press Enter to start editing

Integração com router

<MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
  <Routes>
    <Route path="*" element={<Content />} />
  </Routes>
</MemoryRouter>

<MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
  <Routes>
    <Route path="*" element={<Content />} />
  </Routes>
</MemoryRouter>

Press Enter to start editing

`usePagination`

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

import usePagination from '@mui/material/usePagination';

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}
/>

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

Press Enter to start editing

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

Accessibility

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

The pagination items are in tab order, with a tabindex of "0".

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.