Pagination
The Pagination component enables the user to select a specific page from a range of pages.
<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" />
Buttons
You can optionally enable first-page and last-page buttons, or disable the previous-page and next-page buttons.
<Pagination count={10} showFirstButton showLastButton />
<Pagination count={10} hidePrevButton hideNextButton />
Pagination ranges
You can specify how many digits to display either side of current page with the siblingRange
prop, and adjacent to the start and end page number with the boundaryRange
prop.
<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
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 '@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 theTablePagination
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.
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.
Keyboard
The pagination items are in tab order, with a tabindex of "0".