How to change MaterialUI onPageChange actions for Table Pagination

user_15076674 0
Viewed 958

I am using server-side pagination for my app. I want to use MUI's Table Pagination component here https://codesandbox.io/s/f71wj But the problem is my next page data aren't in the state until user hit the next page button. I tried that, I retrieve the first 10 items then, set the rows per page to 5 so that user will be able to click the next page and I will retrieve 10 more data.

const [rowsPerPage, setRowsPerPage] = React.useState(5);

Another 10 data come to state but the nextPage button being disabled,instead it brings retrieved data on prev button clicked. Because the TablePagination component handles both previous and next pages in the same function.

I wonder if I can seperate that features into different functions; such as OnPrevPageClick, onNextPageClick. Or, is there any MUI pagination component that I will use according to my needs

google-cloud-firestore material-ui reactjs
1 Answers

Well, that happens with you simply because MUI's Table Pagination is for client-side pagination which means in case you have 100 records, you could control the number of rows being rendered in this way

const [rowsPerPage, setRowsPerPage] = React.useState(5);

but in case you want to implement Server-Side Pagination, you could simply use MUI Controlled Pagination, read more about MUI Controlled Pagination from here

user_125556890
Related