Pagination

Pagination component

Overview

The Pagination component is used to divide large amounts of data into multiple pages. It provides previous/next buttons and page number buttons, visually highlighting the current page.

Basic Usage

currentPage, totalPages, onPageChange Use by passing props.

Live Example (Total 10 pages):

Current Page: 1

component.tsx

import { useState } from 'react';
import { Pagination } from 'podo-ui';

return function MyComponent() {
  const [currentPage, setCurrentPage] = useState(1);

  return (
    <Pagination
      currentPage={currentPage}
      totalPages={10}
      onPageChange={setCurrentPage}
    />
  );
}

Many Pages

When there are many pages, they are displayed in groups of 5 by default. Only the pages in the group containing the current page are shown.

Live Example (Total 20 pages):

Current Page: 3

Change Visible Pages Count

maxVisiblePages You can adjust the maximum number of pages to display at once using the prop.

Live Example (Display 3 at a time):

Current Page: 7

component.tsx

<Pagination
  currentPage={currentPage}
  totalPages={15}
  onPageChange={setCurrentPage}
  maxVisiblePages={3}
/>

Props

PaginationProps

interface PaginationProps {
  currentPage: number;        // Current page (starts from 1)
  totalPages: number;         // Total number of pages
  onPageChange: (page: number) => void;  // Page change callback
  maxVisiblePages?: number;   // Maximum number of visible pages (default: 5)
}

Key Features

Previous/Next page navigation buttons
Direct page number selection
Visual highlighting of current page
Page grouping (5 pages or custom)
Automatic button disabling on first/last page
Accessibility support

Real-world Example

A complete example using with a data list:

list-with-pagination.tsx

import { useState } from 'react';
import { Pagination } from 'podo-ui';

return function DataList() {
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 10;

  // All data
  const allItems = Array.from({ length: 95 }, (_, i) => `Item ${i + 1}`);

  // Extract only current page data
  const startIndex = (currentPage - 1) * itemsPerPage;
  const currentItems = allItems.slice(startIndex, startIndex + itemsPerPage);
  const totalPages = Math.ceil(allItems.length / itemsPerPage);

  return (
    <div>
      <ul>
        {currentItems.map((item, index) => (
          <li key={startIndex + index}>{item}</li>
        ))}
      </ul>

      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={setCurrentPage}
      />
    </div>
  );
}

Podo UI