Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  2. Pagination
  3. API and Development

Pagination

API and Development

View SourceOpens in a new tabSubmit IssueOpens in a new tab
Pagination is a controlled, table-agnostic pagination primitive. Pass page (1-indexed) and onPageChange; choose type to switch between PaginationType.Simple (default — Previous/Next, supports an unknown pageCount) and PaginationType.Numbered (chevrons plus numbered page buttons, requires a known pageCount).
Pagination
NameTypeDefaultDescription
copyPaginationNumberedCopy | PaginationCopy—Copy for the landmark, the steps, the status and the page buttons. Copy for the landmark, the steps and the status.
classNamestring—Classes appended to the landmark.
defaultPagenumber1Initial one-based page when uncontrolled.
hideLabelboolean—Hides the status line. The same text stays available to screen readers as a polite status.
loadingbooleanfalseA page is loading. The landmark reports aria-busy and data-loading, and a press asks for nothing until loading ends. The controls stay focusable and keep their paint: loading is not disabled.
localestring—BCP 47 locale that formats the digits on the page buttons. Defaults to the runtime locale. Belongs to the Numbered form.
onPageChange((page: number, details: ChangeDetails<ChangeReason.ItemPress>) => void)—Called when a press asks for another page, including in controlled mode, and not when the target is the page already shown. Cancel the change through details to keep the current page. The component never fetches: the caller loads the page. @param page - The one-based page that was asked for @param details - Why the change was asked for, the press event, and the pressed control
pagenumber—Controlled one-based page. undefined on the first render makes the component uncontrolled. A page outside 1 through pageCount is shown clamped into range, and onPageChange is not called for the clamp.
pageCountnumberUNKNOWN_PAGE_COUNTTotal pages. Required: page buttons cannot be drawn without a known total. Total pages. Omit it, or pass UNKNOWN_PAGE_COUNT (-1), when the total is not known, as with cursor pagination: the status reads copy.page, and Next stays enabled. A negative, fractional or non-finite count is treated the same way: a fraction is rounded down and the rest count as unknown.
refRef<HTMLElement>—Ref to the nav landmark.
showArrowsbooleantrueBelongs to the Simple form. Draws a chevron beside each step label. The chevrons mirror in right-to-left text.
siblingCountnumber1Page buttons shown on each side of the current page before the list truncates. 1 gives 1 … 4 5 6 … 10. Belongs to the Numbered form.
typePaginationTypePaginationType.SimpleThe form to render.
Storybook
Interactive examples and edge cases for this component are in Storybook.
DefaultOpens in a new tab
PaginationType
NameTypeDefaultDescription
Simple"simple"-Previous/Next buttons. Supports an unknown total page count.
Numbered"numbered"-Chevron controls plus numbered page buttons with ellipsis truncation. Requires a known pageCount.
Simple
Simple with an unknown total
Numbered
Numbered with a wider sibling window
Previous
Pagination / Usage
Next
Pagination / Accessibility
On this page
Pagination
Storybook
PaginationType
Simple
Simple with an unknown total
Numbered
Numbered with a wider sibling window