ComponentsServer Pagination

Server Pagination

A framework-agnostic pagination component designed for client routers and asynchronous state setups.

React

Next.js / TanStack

Interactive Demo

Toggle through the active modes below. Ellipsis automatically slides depending on the selected page.

State-Driven Mode (TanStack Query / API Clicks)

Intercepts clicks to update local states dynamically without navigating. Currently on page 1 of 12.

SEO / Routing Mode (Next.js / TanStack Router)

Generates relative search parameter URLs (e.g. /docs?page=[number]) ideal for static page generation and server rendering.

Installation

pnpm dlx shadcn@latest add https://micto-ui-kit.misangono.net/r/micto/server-pagination.json

Interactive State Mode (TanStack Table & Query)

Use this mode when you are loading data inside local states. Page changes will trigger a reactive query update.

import { useState } from "react"
import { useQuery } from "@tanstack/react-query"
import { ServerPagination } from "@/components/micto/server-pagination"

export default function UsersTable() {
  const [page, setPage] = useState(1)
  const { data } = useQuery({
    queryKey: ["users", page],
    queryFn: () => fetchUsers(page),
  })

  return (
    <div>
      {/* Table Elements */}
      <ServerPagination 
        currentPage={page} 
        totalPages={data?.lastPage ?? 1} 
        onPageChange={(targetPage) => setPage(targetPage)} 
      />
    </div>
  )
}

SEO Route Mode (Next.js & TanStack Router)

Use this mode to leverage server rendering and routing parameters. Clicks will trigger router navigations to clean relative URLs.

import Link from "next/link"
import { ServerPagination } from "@/components/micto/server-pagination"

export default function BlogListingPage({ searchParams }) {
  const page = parseInt(searchParams.page || "1", 10)
  const totalPages = 15

  return (
    <div>
      {/* Blog Cards */}
      <ServerPagination 
        currentPage={page} 
        totalPages={totalPages} 
        createPageHref={(pageNum) => `/blog?page=${pageNum}`} 
        LinkComponent={Link} 
      />
    </div>
  )
}

API Reference

Configure the component using the following properties.

Prop	Type	Default	Description
currentPage	number	required	The current active page number (1-indexed).
totalPages	number	required	The total number of pages available.
onPageChange	(page: number) => void	undefined	Callback triggered when a page button is clicked. If provided, default navigation is intercepted.
createPageHref	(page: number) => string	undefined	A helper function that builds relative URLs for routing SEO paths.
LinkComponent	React.ComponentType	a	Custom routing Link component (e.g. Next.js Link, TanStack Router Link, etc.).
size	'default' \| 'sm' \| 'lg' \| 'icon'	'icon'	The visual dimensions profile of the buttons.
position	'start' \| 'center' \| 'end'	'center'	Horizontal alignment profile inside the container.
className	string	undefined	Custom CSS classes to apply to the outer pagination container.

PreviousSearch Select NextTabbed View