pagination.md

Pagination

Pagination component provides all the accessibility features for the page navigation.

Table of Contents

• Usage
• Accessibility Requirement
• Composition
• Props
  • PaginationOptions
  • PaginationButtonOptions
  • PaginationStateProps

Usage

import * as React from "react";

import {
  Pagination,
  PaginationButton,
  usePaginationState,
} from "@adaptui/react";

export const PaginationBasic = props => {
  const state = usePaginationState({ count: 10, ...props });

  return (
    <Pagination state={state} aria-label="Pagination">
      <ul style={{ display: "flex", listStyle: "none" }}>
        <li>
          <PaginationButton goto="firstPage">First</PaginationButton>
        </li>
        <li>
          <PaginationButton goto="prevPage">Previous</PaginationButton>
        </li>
        {state.pages.map(page => {
          if (page === "start-ellipsis" || page === "end-ellipsis") {
            return <li key={page}>...</li>;
          }

          return (
            <li key={page}>
              <PaginationButton
                goto={page}
                style={{
                  fontWeight: state.currentPage === page ? "bold" : undefined,
                }}
              >
                {page}
              </PaginationButton>
            </li>
          );
        })}
        <li>
          <PaginationButton goto="nextPage">Next</PaginationButton>
        </li>
        <li>
          <PaginationButton goto="lastPage">Last</PaginationButton>
        </li>
      </ul>
    </Pagination>
  );
};

export default PaginationBasic;

Accessibility Requirement

• Pagination should have aria-label or aria-labelledby attribute.

Composition

• Pagination uses Role
• PaginationButton uses Role
• usePaginationState uses its own state

Props

PaginationOptions

Name	Type	Description
state	PaginationState	Object returned by the usePaginationState hook.

PaginationButtonOptions

Name	Type	Description
state	PaginationState | undefined	Object returned by the usePaginationState hook.
goto	Goto	Provide the page you want to go.

PaginationStateProps

Name	Type	Description
defaultPage	number | undefined	Set the default page(uncontrollable)
page	number | undefined	Set the page(controllable)
onChange	((page: number) => void) | undefined
count	number | undefined	Total no. of pages
boundaryCount	number | undefined	No. of boundary pages to be visible
siblingCount	number | undefined	No. of sibiling pages allowed before/after the current page