I'm using antd table React Js for my work. Right now, I got a requirement to change the behaviour of pagination inside antd table. I will need to control the previous and next button on pagination component. For this reason I need to make a custom pagination for antd table. The requirements are:

• Data inside table will be retrieved 50 records/API call.
• Data inside table will be displayed 10 records/page.
• next button on pagination will be enabled if there are remaining data in the system but not being retrieved yet, and will be disabled otherwise. E.g. there are 100 records in system. First API call will get 50 latest records (no 100 - 50) and will be rendered into the table. Since one page will display 10 records, it will be in 5 pages. After user arrived in page 5, the next button will be available because there are remaining 50 records in the system. If user click the next, API will be called for the second time and data inside the table will appended and total page will be 10 because, all of data has been retrieved. next button will disabled after the second API call and user only able to go to page 10 for the last page.

I believe that antd pagination doesn't support of controlling next and prev button as I cannot find the props to control the state of the next and prev button in the documentation (https://ant.design/components/pagination/#API). For the table documentation, I also don't find props to change the pagination component. (https://ant.design/components/table/#API)

My question is, how do I embedded my custom pagination component to antd table ? To be noted that, my table also has filter and sorting function. So, I don't want to change the behaviour of those function. Example code and explanation would be really great, thank you.