Pagination

Page navigation with a windowed page list, prev/next controls, and an optional page-size changer.

import { Pagination } from '@lobehub/ui/base-ui';

NPM Source Edit

Navigation

Basic

Loading preview

APIs

Pagination properties

current: number
defaultCurrent: number
Defaults to 1.
defaultPageSize: number
Defaults to 10.
disabled: boolean
hideOnSinglePage: boolean
onChange: (page: number, pageSize: number) => void
onPageSizeChange: (current: number, size: number) => void
pageSize: number
pageSizeOptions: number[]
ref: null | (instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES] | RefObject<HTMLElement | null>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
showSizeChanger: boolean
Defaults to false.
showTotal: (total: number, range: [number, number]) => ReactNode
size: 'small' | 'middle'
Defaults to "middle".
totalRequired: number

Also accepts all native HTML and ARIA attributes.

Pagination renders a native <nav> with role="navigation" and aria-label="Pagination". All standard nav HTML attributes including className, style, and ref are forwarded to the root element.

Migrating from antd Pagination

The core migration is an import replacement, keeping the shared props:

import { Pagination } from '@lobehub/ui/base-ui';

<Pagination
  current={current}
  pageSize={pageSize}
  showSizeChanger
  total={total}
  onChange={setCurrent}
/>;

current/onChange and pageSize/onPageSizeChange each support both controlled and uncontrolled usage via defaultCurrent/defaultPageSize.

antd's size="default" becomes size="middle".