21

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.

Yu Chia Wu
  • 876
  • 12
  • 14
Aadhi Vive
  • 575
  • 1
  • 5
  • 17

2 Answers2

54

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

Yu Chia Wu
  • 876
  • 12
  • 14
2

The above example is a straightforward way to implement the custom pagination. I did, however, notice a small issue with the getData function. The table never gets to render the last item in the data array if you use that function. Instead, you might wanna change it to something like

const getData = (current, pageSize) => {
return data.slice((current - 1) * pageSize, current * pageSize);
}
hildakh
  • 23
  • 3
  • Thanks for the suggestion, I've updated my example. – Yu Chia Wu Sep 21 '20 at 16:13
  • The solutions are good but they still have an additional issue, when you have filtering and sorting, the custom Pagination makes your sorting and filtering only work on the current page and not your total data array because the pagination relies on truncating the original full data array, I am thinking of a way around that. – BoyePanthera Oct 26 '22 at 10:19