Photonix UI - React Components, Templates & Figma Design System

Pagination

Controls for navigating between multiple pages of content.

Preview

1-10of 100

...

Items per page

Usage

import { Pagination } from '@photonix/ultimate';

<Pagination 
  totalItems={100} 
  itemsPerPage={10} 
  currentPage={page} 
  onPageChange={setPage} 
/>

Component API

Pagination

Prop	Type	Default	Description
currentPage	`number`	`-`	Current page number (1-indexed)
totalItems	`number`	`-`	Total number of items
itemsPerPage	`number`	`-`	Number of items per page
itemsPerPageOptions	`number[]`	`[10, 20, 50, 100]`	Options for items per page dropdown
onPageChange	`((page: number) => void)`	`-`	Callback when page changes
onItemsPerPageChange	`((itemsPerPage: number) => void)`	`-`	Callback when items per page changes
showItemsPerPage	`boolean`	`true`	Show items per page selector
showItemRange	`boolean`	`true`	Show item range text (e.g., "1-10 of 1200")
className	`string`	`-`	Additional CSS class

Pagination

Preview

Component API

Pagination

On this page