CODEWITHSUNDEEP
reactjsgoogle-cloud-firestorematerial-ui
bitsedegitsek
bitsedegitsek

Reputation: 148

How to change MaterialUI onPageChange actions for Table Pagination

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

Upvotes: 1

Views: 2337

Answers (1)

Ahmed Muhammed Elsaid
Ahmed Muhammed Elsaid

Reputation: 190

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

Upvotes: 1

Related Questions