Search code examples
reactjsantd

Is there a way to make ant design pagination rows per page always show up?

I am currently using ant design in my reactJs application and I notice that Pagination rowsPerPage drop-down only appear when totalElement is greater than the maximum option in rowsPerPage. Is there a way I can make rowsPerPage always visible?

Thanks in advance

Solution

  • By default, it only show dropdown (Actually it is called sizeChanger Dropdown) when total > 50.

    If you want to show sizeChanger dropdown manually, you can pass showSizeChanger: true as prop in pagination component.

    <Pagination showQuickJumper total={...} />

    Please check Antd Pagination API for all the options you can pass to pagination component. Antd Pagination API

    TLDR

    If you want to override the dropdown pageSize, you can pass your custom values in pageSizeOptions:

    <Pagination showQuickJumper total={...}. pageSizeOptions: [15, 20, 30, 40, 50] />