antd - ant design table with pagination control supporting a widget to choose rows per page?

Aadhi Vive picture Aadhi Vive · Aug 14, 2018 · Viewed 13.4k times · Source

Does the Ant Design Table controller take a Pagination component, instead of a plain object of properties. I need to add a switcher, to switch between rows per page.

Currently it is implemented in the Pagination component.

Answer

Yu Chia Wu picture Yu Chia Wu · Nov 15, 2018

If what you need is only the ability to select the number of rows per page, then the following code should work for you:

<Table
    dataSource={...}
    pagination={{ defaultPageSize: 10, showSizeChanger: true, pageSizeOptions: ['10', '20', '30']}}
>

Basically wrapping the Pagination props into a pagination object, and pass it into your Table component.

If you need more customization you might want to consider turning the default Table pagination off and hook up your custom pagination component. Sample code:

Edit nervous-jennings-iw5l6