> ## Documentation Index > Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt > Use this file to discover all available pages before exploring further. # Pagination > A navigation control for moving between pages of a paginated dataset — supports ellipsis for large page counts and 3 sizes. ## Overview
...
**Pagination** renders page number buttons, previous/next arrows, and an ellipsis for large page counts. It can be controlled or uncontrolled and pairs naturally with the Table component. *** ## Installation ```bash npm theme={null} npm install @araf-ds/core ``` ```bash yarn theme={null} yarn add @araf-ds/core ``` ```bash pnpm theme={null} pnpm add @araf-ds/core ``` *** ## Usage ```tsx theme={null} import { Pagination } from "@araf-ds/core" export default function Example() { const [page, setPage] = useState(1) return ( ) } ``` *** ## Variants ### Basic
```tsx theme={null} console.log(p)} /> ``` ### With Ellipsis (Many Pages)
... ...
```tsx theme={null} {/* renders: « 1 ... 6 [7] 8 ... 50 » */} ``` ### Usage with Data Table ```tsx theme={null} function UsersTable({ users }: { users: User[] }) { const [page, setPage] = useState(1); const pageSize = 10; const totalPages = Math.ceil(users.length / pageSize); const visibleUsers = users.slice((page - 1) * pageSize, page * pageSize); return (
{/* rows from visibleUsers */}
); } ``` *** ## API Reference Controlled current page (1-indexed). Callback fired when the user navigates to a different page. Uncontrolled default page. Total number of pages (required). Number of page buttons shown on each side of the current page. Shows first («) and last (») page jump buttons. Button size. Values: `sm` · `md` · `lg` Additional Tailwind classes for custom overrides. *** ## Accessibility * Pagination uses a `