question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SizeChanger of Pagination should hide when PageSize is set

See original GitHub issue
  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

[Edit on CodeSandbox

Steps to reproduce

  1. Set pageSize of a Pagination.
  2. When total number gets large, the SizeChanger shows.
  3. I don’t need that SizeChanger when I already have a pageSize, not speaking that SizeChanger doesn’t work if I don’t set onShowSizeChange.

What is expected?

Don’t automatically show the SizeChanger when I already have a pageSize.

What is actually happening?

SizeChanger automatically shows when I already have a pageSize, which can’t work if I don’t set onShowSizeChange.

Environment Info
antd 4.1.4
React 16.12.0
System win10
Browser Google Chrome version79.0.3945.88

The original default value false of showSizeChanger is just fine in the old version. The new default value is OK but it will be much more userfirendly if you hide the SizeChanger when pageSize is already set. So I don’t have to manually set showSizeChanger to false every time I use it.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

17reactions
afc163commented, Apr 21, 2020

It is not a bug, check https://github.com/ant-design/ant-design/pull/22711 and https://ant.design/components/table/#API

You can turn off size changer by setting showSizeChanger={fasle} manually.

0reactions
sajinsha9595commented, Sep 29, 2022

Even though i set an onSizeChange function while filtering pagination based on 10/20/50 its not working. idk why its not working… This is the Code

const [pageSize, setPageSize] = useState(20); const [currentPage, setCurrentPage] = useState(0);

const handlePageNumSizeClick = (current, size) => { setPageSize(size); setCurrentPage(current - 1); };

<Pagination hideOnSinglePage={true} size=“small” total={bannerCount} current={currentPage + 1} defaultPageSize={DEFAULT_PAGE_SIZE} onChange={handlePageNumClick} showSizeChanger onShowSizeChange={handlePageNumSizeClick} />

Read more comments on GitHub >

github_iconTop Results From Across the Web

Pagination - Ant Design
A long list can be divided into several pages using Pagination, and only one page will be loaded at a time.
Read more >
Pagination - Home • General Assembly, Design
Property Description Default current current page number ‑ defaultCurrent default initial page number 1 defaultPageSize default number of data items per page 10
Read more >
antd - ant design table with pagination control supporting a ...
I need to add a switcher, to switch between rows per page. Currently it is implemented in the Pagination component. javascript · reactjs...
Read more >
Pagination - Ant Design - GitHub Pages
API# ; size, specify the size of Pagination , can be set to small, string ; total, total number of data items, number...
Read more >
ReactJS UI Ant Design Pagination Component - GeeksforGeeks
We can use the following approach in ReactJS to use the Ant Design ... for sizeChanger. responsive: It is used to allow the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found