Pagination

Pagination is the process of dividing a large amount of content into smaller, also the UI component is used for navigating between these pages.

Basic

Source Code

import { Pagination } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Basic() {
  return (
    <div className="bg-white">
      <Pagination total={10} />
    </div>
  );
}

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.

Source Code

import { Pagination } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Types() {
  return (
    <div className="flex gap-y-8 flex-col">
      <div className="bg-white">
        <Pagination total={10} />
      </div>
      <div className="bg-white">
        <Pagination total={10} type="editable" />
      </div>

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.

Last Action:

Source Code

import { Pagination, Text } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Control() {
  const [page, setPage] = React.useState<number | undefined>(1);
  const [pageInput, setPageInput] = React.useState<number | undefined>(1);
  const [actionMessage, setActionMessage] = React.useState<string | undefined>(undefined);
  const handleControl = (message: string) => () => setActionMessage(message);
  return (
    <div className="flex gap-y-8 flex-col">
      <Text level="button">Last Action: {actionMessage}</Text>
      <div className="bg-white">

Sizes

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

Source Code

import { Pagination } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Sizes() {
  return (
    <div className="flex gap-x-8">
      <div className="flex gap-y-8 flex-col">
        <div className="bg-white">
          <Pagination total={10} />
        </div>
        <div className="bg-white">
          <Pagination total={10} size="md" />
  • With size responsive, the component will be responsive to the viewport.

Screen prefix

Screen width

Component size

xs → xl0px → 1279pxsm
xl → 3xl1280px → 1919pxmd
3xl → ∞1920px → ∞lg

Source Code

import { Pagination } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function ResponsiveSize() {
  return (
    <div className="flex gap-x-8">
      <div className="bg-white">
        <Pagination total={10} size="responsive" />
      </div>
      <div className="bg-white">
        <Pagination total={10} type="editable" size="responsive" />
      </div>

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.

Source Code

import { Pagination } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function WithEdges() {
  return (
    <div className="flex gap-y-8 flex-col">
      <div className="bg-white">
        <Pagination total={10} withEdges />
      </div>
      <div className="bg-white">
        <Pagination total={10} type="editable" withEdges />
      </div>

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.

Source Code

import { Pagination } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function WithControls() {
  return (
    <div className="flex gap-y-8 flex-col">
      <div className="bg-white">
        <Pagination total={10} withControls={false} withEdges />
      </div>
      <div className="bg-white">
        <Pagination total={10} type="editable" withControls={false} withEdges />
      </div>

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

Source Code

import {
  ArrowLeftOutline,
  ArrowRightOutline,
  ChevronNextOutline,
  ChevronPreviousOutline,
} from '@ocean-network-express/magenta-ui/icons';
import { Pagination } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function CustomIcons() {
  return (
    <div className="bg-white">

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.

Source Code

import { Pagination } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Boundaries() {
  return (
    <div className="flex gap-x-4 flex-col bg-white">
      <Pagination total={100} defaultPage={50} boundaryCount={4} />
    </div>
  );
}

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.

Source Code

import { Pagination } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Siblings() {
  return (
    <div className="flex gap-x-4 flex-col bg-white">
      <Pagination total={100} defaultPage={50} siblingCount={4} />
    </div>
  );
}

Render Total Pages

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

Source Code

import { Pagination } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function RenderTotalPages() {
  return (
    <div className="bg-white">
      <Pagination
        total={10}
        type="editable"
        renderTotalPages={({ total }) => \` / \${total} ページ\`}
      />
    </div>

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>

Source Code

import { DocumentTextOutline } from '@ocean-network-express/magenta-ui/icons';
import { NumberInput, Pagination } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function RenderInput() {
  return (
    <div className="bg-white">
      <Pagination
        total={10000}
        type="editable"
        renderPageInput={(props) => (
          <NumberInput

Disabled

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

Source Code

import { Pagination } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Disabled() {
  return (
    <div className="flex gap-y-8 flex-col">
      <div className="bg-white">
        <Pagination total={10} disabled />
      </div>
      <div className="bg-white">
        <Pagination total={10} type="editable" disabled />
      </div>

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”.

Was this page helpful?