I am using antd table pagination and i want to custom the pagination. 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.
suggest me a suitable approach.
<Table
columns={columns}
dataSource={tableinfo.data_source}
pagination={false}
/>
<Pagination
total={500}
itemRender={itemRender}
/>
const itemRender = (current, type, originalElement) => {
if (type === 'prev') {
return <a>Previous</a>;
}
if (type === 'next') {
return <a>Next</a>;
}
return originalElement;
}