Pagination

The Pagination component provides page navigation controls with support for first/last/next/previous buttons, dynamic page numbers, and a page size selector. It automatically adapts between desktop and mobile layouts and supports both LTR and RTL locales.

import { Pagination } from "tawuniya/components";

👉 View in Storybook

Props

Prop	Type	Default	Description
paginationTotal	number	—	Total number of items.
firstButtonLabel	string	—	Custom label for the "First" button.
lastButtonLabel	string	—	Custom label for the "Last" button.
prevButtonLabel	string	—	Custom label for the "Previous" button.
nextButtonLabel	string	—	Custom label for the "Next" button.
className	string	—	Custom classes.

Usage

Basic Example

<Pagination paginationTotal={200} />

With Custom Labels

<Pagination
  paginationTotal={100}
  firstButtonLabel="<<"
  lastButtonLabel=">>"
  prevButtonLabel="Prev"
  nextButtonLabel="Next"
/>

Features

• Responsive Layout:
  • Desktop → shows First and Last buttons.
  • Mobile → hides First and Last buttons for compactness.
• Localization:
  • Adapts icons and labels for Arabic (rtl) and English (ltr).
• Dynamic Page Numbers:
  • Automatically generates page numbers with ellipsis (...) when needed.
• Page Size Selector:
  • Allows changing how many items per page (default: 10).

Notes

• Pagination state (page, pageSize, etc.) is managed internally by the hook usePaginationQuery.
• Default page size options: 5, 10, 20, 30, 40, 50.