Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
Part of the Ant Design ecosystem.
📄 React pagination primitives for page navigation, size changing, quick jumping, and locale-aware controls.
English | 简体ä¸æ–‡
- Controlled and uncontrolled pagination state.
- Page-size changer, quick jumper, simple mode, compact item count, and custom item rendering.
- Locale packages exposed from @rc-component/pagination/locale/*.
- Semantic classNames and styles for item-level customization.
- TypeScript definitions for props, locale, callbacks, and state.
- Used by Ant Design as the shared pagination foundation.
npm install @rc-component/paginationimport Pagination from '@rc-component/pagination';
import '@rc-component/pagination/assets/index.css';
export default () => (
<Pagination defaultCurrent={1} total={120} showSizeChanger showQuickJumper />
);import Pagination from '@rc-component/pagination';
import enUS from '@rc-component/pagination/locale/en_US';
export default () => (
<Pagination
defaultCurrent={2}
total={500}
locale={enUS}
showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
/>
);Run the local dumi site:
npm install
npm startThen open http://localhost:8000.
| Property | Type | Default | Description |
|---|---|---|---|
| align | 'start' | 'center' | 'end' | - | Align pagination items. |
| className | string | - | Class name for the root element. |
| classNames | Partial<Record<'item', string>> | - | Semantic class names. |
| current | number | - | Controlled current page. |
| defaultCurrent | number | 1 | Initial current page. |
| defaultPageSize | number | 10 | Initial page size. |
| disabled | boolean | false | Disable pagination interactions. |
| hideOnSinglePage | boolean | false | Hide when there is only one page. |
| itemRender | (page, type, element) => ReactNode | - | Customize page, previous, next, and jump items. |
| jumpNextIcon | ReactNode | ComponentType | - | Custom next-jump icon. |
| jumpPrevIcon | ReactNode | ComponentType | - | Custom previous-jump icon. |
| locale | PaginationLocale | zh_CN | Locale text. |
| nextIcon | ReactNode | ComponentType | - | Custom next icon. |
| pageSize | number | - | Controlled page size. |
| pageSizeOptions | number[] | - | Page-size options. |
| prefixCls | string | rc-pagination | Class name prefix. |
| prevIcon | ReactNode | ComponentType | - | Custom previous icon. |
| role | React.AriaRole | - | WAI-ARIA role. |
| selectPrefixCls | string | rc-select | Prefix for the size changer select. |
| showLessItems | boolean | false | Show fewer page items. |
| showPrevNextJumpers | boolean | true | Show previous and next jumpers. |
| showQuickJumper | boolean | object | false | Show quick page jumper. |
| showSizeChanger | boolean | total > totalBoundaryShowSizeChanger | Show page-size changer. |
| showTitle | boolean | true | Show title on page items. |
| showTotal | (total, range) => ReactNode | - | Render total text. |
| simple | boolean | { readOnly?: boolean } | false | Use simple pager. |
| sizeChangerRender | SizeChangerRender | - | Customize the size changer. |
| style | React.CSSProperties | - | Root inline style. |
| styles | Partial<Record<'item', CSSProperties>> | - | Semantic styles. |
| total | number | 0 | Total item count. |
| totalBoundaryShowSizeChanger | number | 50 | Boundary for default showSizeChanger. |
| onChange | (page: number, pageSize: number, info?: { recommendPage?: number }) => void | - | Triggered when page or page size changes. The info.recommendPage is only provided when pageSize changes, indicating the recommended page number based on the new page size. |
| onShowSizeChange | (current: number, size: number) => void | - | Triggered when page size changes. |
npm install
npm start
npm test
npm run tsc
npm run coverage
npm run compile
npm run buildThe dumi site runs at http://localhost:8000 by default.
npm run prepublishOnlyThe release flow is handled by @rc-component/np through the rc-np command after the package build.
@rc-component/pagination is released under the MIT license.