Pagination

A pagination component for navigating through pages of data.

Import

import { Pagination } from '@/components/ui';

Basic Usage

'use client';
import { useState } from 'react';
import { Pagination } from '@/components/ui';

export function Example() {
  const [page, setPage] = useState(1);
  const totalPages = 10;

  return (
    <Pagination
      currentPage={page}
      totalPages={totalPages}
      onPageChange={setPage}
    />
  );
}

Props

Without First/Last Buttons

<Pagination
  currentPage={page}
  totalPages={totalPages}
  onPageChange={setPage}
  showFirstLast={false}
/>

With Data Table

'use client';
import { useState } from 'react';
import { Pagination, Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui';

const ITEMS_PER_PAGE = 10;

export function PaginatedTable({ data }) {
  const [page, setPage] = useState(1);
  const totalPages = Math.ceil(data.length / ITEMS_PER_PAGE);

  const paginatedData = data.slice(
    (page - 1) * ITEMS_PER_PAGE,
    page * ITEMS_PER_PAGE
  );

  return (
    <div className="space-y-4">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Name</TableHead>
            <TableHead>Email</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {paginatedData.map((item) => (
            <TableRow key={item.id}>
              <TableCell>{item.name}</TableCell>
              <TableCell>{item.email}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>

      <div className="flex justify-center">
        <Pagination
          currentPage={page}
          totalPages={totalPages}
          onPageChange={setPage}
        />
      </div>
    </div>
  );
}

Server-Side Pagination

'use client';
import { useQuery } from '@tanstack/react-query';
import { useState } from 'react';
import { Pagination, Spinner } from '@/components/ui';

export function ServerPaginatedList() {
  const [page, setPage] = useState(1);

  const { data, isLoading } = useQuery({
    queryKey: ['items', page],
    queryFn: () => fetch(`/api/items?page=${page}`).then(r => r.json()),
  });

  if (isLoading) return <Spinner />;

  return (
    <div className="space-y-4">
      <ul>
        {data.items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>

      <Pagination
        currentPage={page}
        totalPages={data.totalPages}
        onPageChange={setPage}
      />
    </div>
  );
}

Page Number Logic

The component intelligently shows page numbers:

• 7 or fewer pages: Shows all pages
• More than 7 pages: Shows ellipsis for hidden pages

Examples:

• 1 2 3 4 5 6 7 (7 pages)
• 1 2 3 4 ... 20 (current near start)
• 1 ... 8 9 10 ... 20 (current in middle)
• 1 ... 17 18 19 20 (current near end)

For Advanced Tables

For built-in pagination with DataTable:

import { DataTable } from '@/components/ui/data-table/DataTable';

See DataTable for integrated pagination.