Pagination

Basic

Types

• There are 2 types of pagination navigable | editable:
  • navigable pagination navigates between pages by selecting the page number.
  • editable pagination allows the user to go to the page by inputting the number of the page.
• Default pagination type is navigable.

Control Pagination

Pagination can be controlled

• selected page by setting page prop.
• callback function to handle page change by setting onPageChange prop.
• callback function to handle edge button click by setting onFirstPage | onLastPage | onNextPage | onPreviousPage props.

Sizes

• There are 4 sizes of pagination sm | md | lg | responsive.
• Default pagination size is lg.

• With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
xs → xl	0px → 1279px	sm
xl → 3xl	1280px → 1919px	md
3xl → ∞	1920px → ∞	lg

With Edge Buttons

• Pagination can have edge buttons to navigate to the first and last pages by setting withEdges is true.
• Default value of withEdges is false.

With Controls Buttons

• Pagination have control buttons to navigate to the next and previous pages by default.
• Pagination can turn off control buttons by setting value of withControls is false.

Custom Icons

• Pagination supports icons from the @ocean-network-express/magenta-ui/icons package.
• Pagination supports custom icons for five types.

Icon Slot	Position
firstIcon	First edge button icon
lastIcon	Last edge button icon
previousIcon	Previous control button icon
nextIcon	Next control button icon
dotIcon	Dots icon component between pagination page number buttons

Boundaries Count

• Navigable pagination can be setted number of elements visible on the left/right edges by passing number to boundaryCount prop.
• Default boundaryCount is 1.

Siblings Count

• Navigable pagination can be setted number of siblings elements displayed on the left/right side of the selected page by passing number to siblingCount prop.
• Default siblingCount is 1.

Render Total Pages

• Editable pagination can be customized to render total pages by using renderTotalPages prop.
• renderTotalPages prop type is React.FC<{total: number}>

Render Page Input Field

• Editable pagination can be customized to render page number input field by using renderPageInput prop.
• renderPageInput prop type is React.FC<NumberInputProps>

Disabled

• Pagination can be disabled by setting disabled prop to true.
• Default value of disabled is false.

Accessibility

Roles and properties

• 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.).
• The current selected page item has an aria-current="page" attribute.

Keyboard navigation

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