Paginate

This document presents a reusable React component for displaying paginated results, organization filters, and full presentation control.

Paginate Element

The Paginate is a composite React component that manages:

• Display of results with pagination
• Optional organization filter (via PerForeas)
• Display of result descriptions (PaginationPages)
• Page navigation control (PaginationControl)
• Slot for content (children) that represents each page

Props

interface Props {
  canShow: boolean;
  showTop?: boolean;
  pagination: PaginationType;
  children: React.ReactNode;
}

In detail:

• canShow: Enables or disables the display of pagination and filter sections.
• pagination: Information about number of pages, total results, etc.
• children: Content to be displayed (e.g. result list).
• showTop: To show the results of pagination pages.

Behavior

Paginate.tsx

"use client";

import * as React from "react";
import { PaginationType } from "@/type_all";
import PaginationControl from "./PaginationControl";
import PaginationPages from "./PaginationPages";

export default function Paginate({
  canShow = false,
  showTop = true,
  pagination,
  children,
}: Props) {
  const { total_pages, total_items } = pagination || { total_pages: 0 };

  return (
    <>
      {canShow && showTop && (
        <div className="flex flex-row justify-between md:items-center pt-[19px] pb-[21px] gap-4">
          <PagesPerPage itemsPerPage={itemsPerPage} pageType={pageType} />
          <PaginationControl totalPages={total_pages} pageType={pageType} />
        </div>
      )}

      {/* Content */}
      {children}

      {/* Pagination info */}
      {canShow && total_items > 0 && (
        <div className="flex sm:flex-row flex-col items-center sm:items-start gap-2 pt-5 pb-5 w-full">
          <div className="flex justify-center sm:justify-start w-full">
            <PaginationPages pagination={pagination} />
          </div>

          <div className="flex justify-center sm:justify-end w-full">
            <PaginationControl totalPages={total_pages as number} />
          </div>
        </div>
      )}
    </>
  );
}

Example Usage

<Paginate
  canShow={true}
  showTop={true}
  pagination={{
    page: 1,
    per_page: 10,
    total_items: 100,
    total_pages: 10,
  }}
>
  <ResultsList />
</Paginate>

Notes

children can include any React element – e.g. list, table, etc.

---

We'd love your feedback

Was this helpful?

Yes

No