Pagination Samples

Different from Pagination in APIs but still as important to cover.

In PageWith Route Changes

— Controlled (Client State)

Uses state for `page` and `pageSize`. Shows a compact window with ellipses.

Total: 57

Showing 1–8 of 57

Page 1 of 8

Per page

₹1,29,999

₹1,30,499

₹1,30,999

₹1,31,499

₹1,31,999

₹1,32,499

₹1,32,999

₹1,29,999

Jump to

primitives support `isActive` for the current page and ellipses via `PaginationEllipsis`.

Controlled

— With Routing

Uses `next/Link` via `asChild` to navigate with query params.

Example only — the links below point to `/catalog?page=n`.

For server components, parse `searchParams.page` and pass it down.

Routing

— Disabled Ends

The first/last controls can be visually and semantically disabled at the edges.

Written by `ap-icon.svg` via `next/Image`.

Edges

Loading…