Pagination

v1.0.0

Page navigation controls for tables and large result sets.

Import

import { Pagination } from '@meteorack/sdk-react';

How To Use It

Use it when result sets are too large to render comfortably in one pass and the user needs explicit page navigation.
Keep pagination state close to the list or table it controls so the navigation feels local to the data view.

Works Well With

Table PageHeader Badge

Props

currentPage: number

Currently active page number.

totalPages: number

Total number of available pages.

onPageChange: (page: number) => void

Called when the user navigates to another page.

maxVisible?: number

Maximum number of numbered buttons shown before ellipsis is used.

Example

Pagination.tsx

import { useState } from 'react';
import { Pagination } from '@meteorack/sdk-react';

export function TablePagination() {
  const [page, setPage] = useState(3);

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

PreviousTextarea NextContentContainer