Pagination - handle pagination items overflow

[m0nm]

Hello, It would be nice to extend the <Pagination /> component to make it responsible for rendering the pagination items by itself, maybe by providing it with props such as: totalPages and maxItemsCount to achieve something like this:

[agusTrih]

import React from "react";
import Link from "next/link";
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
import { useRouter } from "next/navigation";
interface PaginationProps {
  basePath: string;
  lastPage: number; // Assuming items is an array of objects
  currentPage: number;
}

const PaginationOverflow: React.FC<PaginationProps> = ({
  basePath,
  lastPage,
  currentPage,
}) => {
  const router = useRouter();
  // Handle potential errors or missing props
  if (!basePath || !lastPage || !currentPage) {
    return <div>Missing required props for pagination component.</div>;
  }

  if (currentPage > lastPage || currentPage < 1) return null;
  const renderEllipsis = () => (
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
  );

  const renderPageLink = (pageNumber: number) => (
    <PaginationItem>
      <PaginationLink
        href={`${basePath}?page=${pageNumber}`}
        isActive={pageNumber === currentPage}
      >
        {pageNumber}
      </PaginationLink>
    </PaginationItem>
  );

  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious
            href={`${basePath}?page=${currentPage - 1}`}
            aria-disabled={currentPage <= 1}
            tabIndex={currentPage <= 1 ? -1 : undefined}
            className={
              currentPage <= 1 ? "pointer-events-none opacity-50" : undefined
            }
          />
        </PaginationItem>
        {currentPage === 1 ? null : renderPageLink(1)}
        {currentPage === 1 ||
        currentPage - 1 === 1 ||
        currentPage - 2 === lastPage
          ? null
          : renderEllipsis()}
        {currentPage === 1 || currentPage - 1 === 1
          ? null
          : renderPageLink(currentPage - 1)}
        <PaginationItem>
          <PaginationLink href="#" isActive>
            {currentPage}
          </PaginationLink>
        </PaginationItem>
        {currentPage === lastPage || currentPage + 1 === lastPage
          ? null
          : renderPageLink(currentPage + 1)}
        {currentPage === lastPage ||
        currentPage + 1 === lastPage ||
        currentPage + 2 === lastPage
          ? null
          : renderEllipsis()}
        {currentPage === lastPage ? null : renderPageLink(lastPage)}
        <PaginationItem>
          <PaginationNext
            href={`${basePath}?page=${currentPage + 1}`}
            aria-disabled={currentPage === lastPage}
            tabIndex={currentPage === lastPage ? -1 : undefined}
            className={
              currentPage === lastPage
                ? "pointer-events-none opacity-50"
                : undefined
            }
          />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
};

export default PaginationOverflow;

You can edit as needed.

[eaoliver]

Thanks for the clean wrapper on Shadcn Pagination.

You had a 'lastPage' on the pre-current page components. It should have been a 1 (first page). I didn't like the extra ... between, for example, 1, ..., 3 . Now a ... captures >= 2 page value. This version is closer to the target example. I also parameterized the searchParam to support multiple tables on a page. Factored out URL string to respect other URL parameters. I also made the ellipsis clickable to the midpoint of the range.

Posting an update for the lurkers.

"use client";

import {useSearchParams, usePathname} from "next/navigation";

import {cn} from "@/lib/utils";

import {
  Pagination as ShadcnPagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";

interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
  currentPage: number;
  totalPages: number;
  targetSearchParam: string;
}

export function Pagination({
  currentPage,
  totalPages,
  targetSearchParam,
  className,
}: PaginationProps) {
  const searchParams = useSearchParams();
  const pathname = usePathname();

  const composePageURL = (pageNumber: number) => {
    const params = new URLSearchParams(searchParams);
    params.set(targetSearchParam, `${pageNumber}`);

    return `${pathname}?${params.toString()}`;
  };

  const renderEllipsis = (min: number, max: number) => (
    <PaginationItem>
      <PaginationEllipsis
        href={composePageURL(Math.floor(min + (max - min) / 2))}
      />
    </PaginationItem>
  );

  const renderPageLink = (pageNumber: number) => (
    <PaginationItem>
      <PaginationLink
        href={composePageURL(pageNumber)}
        isActive={pageNumber === currentPage}
      >
        {pageNumber}
      </PaginationLink>
    </PaginationItem>
  );

  // No pagination if there's only a single page or the page is out of bounds.
  if (totalPages == 1 || currentPage < 1 || currentPage > totalPages)
    return null;

  return (
    <ShadcnPagination className={cn(className)}>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious
            href={composePageURL(currentPage - 1)}
            aria-disabled={currentPage <= 1}
            tabIndex={currentPage <= 1 ? -1 : undefined}
            className={
              currentPage <= 1 ? "pointer-events-none opacity-50" : undefined
            }
          />
        </PaginationItem>

        {currentPage === 1 ? null : renderPageLink(1)}
        {currentPage === 1 || currentPage - 1 === 1 || currentPage - 2 === 1
          ? null
          : currentPage - 3 > 1
            ? renderEllipsis(2, currentPage - 2)
            : renderPageLink(currentPage - 2)}
        {currentPage === 1 || currentPage - 1 === 1
          ? null
          : renderPageLink(currentPage - 1)}

        <PaginationItem>
          <PaginationLink href="#" isActive>
            {currentPage}
          </PaginationLink>
        </PaginationItem>

        {currentPage === totalPages || currentPage + 1 === totalPages
          ? null
          : renderPageLink(currentPage + 1)}
        {currentPage === totalPages ||
        currentPage + 1 === totalPages ||
        currentPage + 2 === totalPages
          ? null
          : currentPage + 3 < totalPages
            ? renderEllipsis(currentPage + 2, totalPages - 1)
            : renderPageLink(currentPage + 2)}
        {currentPage === totalPages ? null : renderPageLink(totalPages)}
        <PaginationItem>
          <PaginationNext
            href={composePageURL(currentPage + 1)}
            aria-disabled={currentPage === totalPages}
            tabIndex={currentPage === totalPages ? -1 : undefined}
            className={
              currentPage === totalPages
                ? "pointer-events-none opacity-50"
                : undefined
            }
          />
        </PaginationItem>
      </PaginationContent>
    </ShadcnPagination>
  );
}

This required a minor change to Shadcn PaginationEllipsis to make it a nextjs Link.

const PaginationEllipsis = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="More pages"
    size="icon"
    className={cn(className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
  </PaginationLink>
);

[BrendanC23]

I found https://gist.github.com/nicostombros/fc9a16a67fc47a536cf84736d0b8cfd8 to be helpful in implementing a fully-featured pagination component.