Skip to content

feat: add recommendPage to onChange when pageSize changes #708

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zombieJ merged 5 commits into from
Jul 3, 2026
Merged

feat: add recommendPage to onChange when pageSize changes #708

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a7784f5
feat: add recommendPage to onChange when pageSize changes
Jun 29, 2026
edab4c8
fix: correct preserved page calculation on pageSize change
Jun 29, 2026
ec587c1
Merge branch 'master' into feat/recommend-page-on-size-change
EmilyyyLiu Jun 30, 2026
f9b453b
refactor: change recommendPage to info object to avoid parameter poll…
Jul 3, 2026
b8cc552
feat: update onChange signature to include recommendPage in info object
Jul 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 30 additions & 29 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,35 +49,36 @@ ReactDOM.render(<Pagination />, container);
## API

// prettier-ignore
| Parameter | Description | Type | Default |
| --- | --- | --- | --- |
| disabled | disable pagination | Bool | - |
| align | align of pagination | start \| center \| end | undefined |
| defaultCurrent | uncontrolled current page | Number | 1 |
| current | current page | Number | undefined |
| total | items total count | Number | 0 |
| defaultPageSize | default items per page | Number | 10 |
| pageSize | items per page | Number | 10 |
| onChange | page change callback | Function(current, pageSize) | - |
| showSizeChanger | show pageSize changer | boolean \| [SelectProps](https://github.com/react-component/select/blob/561f8b7d69fd5dd2cd7d917c88976cca4e539a9d/src/Select.tsx#L112) | `false` when total less than `totalBoundaryShowSizeChanger`, `true` when otherwise |
| totalBoundaryShowSizeChanger | when total larger than it, `showSizeChanger` will be true | number | 50 |
| pageSizeOptions | specify the sizeChanger selections | Array<String> | ['10', '20', '50', '100'] |
| onShowSizeChange | pageSize change callback | Function(current, size) | - |
| hideOnSinglePage | hide on single page | Bool | false |
| showPrevNextJumpers | show jump-prev, jump-next | Bool | true |
| showQuickJumper | show quick goto jumper | Bool / Object | false / {goButton: true} |
| showTotal | show total records and range | Function(total, [from, to]) | - |
| className | className of pagination | String | - |
| simple | when set, show simple pager | Bool / { readOnly?: boolean; } | - |
| locale | to set l10n config | Object | [zh_CN](https://github.com/react-component/pagination/blob/master/src/locale/zh_CN.js) |
| style | the style of pagination | Object | {} |
| showLessItems | show less page items | Bool | false |
| showTitle | show page items title | Bool | true |
| itemRender | custom page item renderer | Function(current, type: 'page' \| 'prev' \| 'next' \| 'jump-prev' \| 'jump-next', element): React.ReactNode \| `(current, type, element) => element` | |
| prevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | |
| nextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | |
| jumpPrevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | |
| jumpNextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | |

| Parameter | Description | Type | Default |
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| disabled | disable pagination | Bool | - |
| align | align of pagination | start \| center \| end | undefined |
| defaultCurrent | uncontrolled current page | Number | 1 |
| current | current page | Number | undefined |
| total | items total count | Number | 0 |
| defaultPageSize | default items per page | Number | 10 |
| pageSize | items per page | Number | 10 |
| onChange | page change callback, the third parameter `recommendPage` is only provided when pageSize changes, useful for keeping the user's data position | Function(current, pageSize, recommendPage?) | - |
| showSizeChanger | show pageSize changer | boolean \| [SelectProps](https://github.com/react-component/select/blob/561f8b7d69fd5dd2cd7d917c88976cca4e539a9d/src/Select.tsx#L112) | `false` when total less than `totalBoundaryShowSizeChanger`, `true` when otherwise |
| totalBoundaryShowSizeChanger | when total larger than it, `showSizeChanger` will be true | number | 50 |
| pageSizeOptions | specify the sizeChanger selections | Array<String> | ['10', '20', '50', '100'] |
| onShowSizeChange | pageSize change callback | Function(current, size) | - |
| hideOnSinglePage | hide on single page | Bool | false |
| showPrevNextJumpers | show jump-prev, jump-next | Bool | true |
| showQuickJumper | show quick goto jumper | Bool / Object | false / {goButton: true} |
| showTotal | show total records and range | Function(total, [from, to]) | - |
| className | className of pagination | String | - |
| simple | when set, show simple pager | Bool / { readOnly?: boolean; } | - |
| locale | to set l10n config | Object | [zh_CN](https://github.com/react-component/pagination/blob/master/src/locale/zh_CN.js) |
| style | the style of pagination | Object | {} |
| showLessItems | show less page items | Bool | false |
| showTitle | show page items title | Bool | true |
| itemRender | custom page item renderer | Function(current, type: 'page' \| 'prev' \| 'next' \| 'jump-prev' \| 'jump-next', element): React.ReactNode \| `(current, type, element) => element` | |
| prevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | |
| nextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | |
| jumpPrevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | |
| jumpNextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | |

## License

Expand Down
6 changes: 5 additions & 1 deletion src/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,15 +197,19 @@ const Pagination: React.FC<PaginationProps> = (props) => {
}

function changePageSize(size: number) {
const preservedPage = Math.floor(((current - 1) * pageSize) / size) + 1;
const newCurrent = calculatePage(size, pageSize, total);
const recommendPage =
newCurrent === 0 ? 1 : Math.min(preservedPage, newCurrent);

const nextCurrent =
current > newCurrent && newCurrent !== 0 ? newCurrent : current;

setPageSize(size);
setInternalInputVal(nextCurrent);
onShowSizeChange?.(current, size);
setCurrent(nextCurrent);
onChange?.(nextCurrent, size);
onChange?.(nextCurrent, size, recommendPage);
}

function handleChange(page: number) {
Expand Down
5 changes: 2 additions & 3 deletions src/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,8 @@ export interface PaginationData {
}

export interface PaginationProps
extends Partial<PaginationData>,
React.AriaAttributes {
onChange?: (page: number, pageSize: number) => void;
extends Partial<PaginationData>, React.AriaAttributes {
onChange?: (page: number, pageSize: number, recommendPage?: number) => void;
Comment thread
EmilyyyLiu marked this conversation as resolved.
Outdated
onShowSizeChange?: (current: number, size: number) => void;
itemRender?: (
page: number,
Expand Down
2 changes: 1 addition & 1 deletion tests/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -483,7 +483,7 @@ describe('current value on onShowSizeChange when total is 0', () => {
fireEvent.keyDown(input, { key: 'Down', keyCode: 40, which: 40 });
fireEvent.keyDown(input, { key: 'Enter', keyCode: 13, which: 13 });
expect(onShowSizeChange).toHaveBeenLastCalledWith(1, 20);
expect(onChange).toHaveBeenLastCalledWith(1, 20);
expect(onChange).toHaveBeenLastCalledWith(1, 20, 1);
});

it('when total is 0, pager should show `1` and being disabled', () => {
Expand Down
2 changes: 1 addition & 1 deletion tests/simple.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ describe('simple Pagination', () => {
const pageSize1 = container.querySelectorAll('.rc-select-item')[0];
fireEvent.click(pageSize1);
expect(onChange).toHaveBeenCalled();
expect(onChange).toHaveBeenLastCalledWith(1, 10);
expect(onChange).toHaveBeenLastCalledWith(1, 10, 1);
});

it('should support keyboard event', () => {
Expand Down
2 changes: 1 addition & 1 deletion tests/sizer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ describe('Pagination with sizer', () => {
const pageSize1 = container.querySelectorAll('.rc-select-item')[0];
fireEvent.click(pageSize1);
expect(onChange).toHaveBeenCalled();
expect(onChange).toHaveBeenLastCalledWith(1, 10);
expect(onChange).toHaveBeenLastCalledWith(1, 10, 1);
});

// https://github.com/ant-design/ant-design/issues/26580
Expand Down