41-60of 248
...
Items per page
20
Controls for navigating between multiple pages of content.
"use client";
import { useState } from 'react';
import { Pagination } from '@photonix/ultimate';
export default function PaginationBasicExample() {
const [currentPage, setCurrentPage] = useState(3);
const [itemsPerPage, setItemsPerPage] = useState(20);
return (
<Pagination
currentPage={currentPage}
totalItems={248}
itemsPerPage={itemsPerPage}
onPageChange={setCurrentPage}
onItemsPerPageChange={setItemsPerPage}
showItemsPerPage
showItemRange
/>
);
}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") |
layout | "adaptive" | "stacked" | 'adaptive' | Layout behavior for narrow widths |
className | string | - | Additional CSS class |