CODEWITHSUNDEEP
reactjsmaterial-ui
khalil elloumi
khalil elloumi

Reputation: 97

Failed prop type: Material-UI: the page prop of a TablePagination is out of range

I have a warning error due to pagination problem. I am using material Ui and I have a search function, the problem is when I go to page 2 and try to search something I get the following error

Failed prop type: Material-UI: the page prop of a TablePagination is out of range (0 to 0, but page is 1)

the current table pagination code is 

<TablePagination
             onClick = {handleDrawerClose}
             rowsPerPageOptions={[5, 20, 50]}
             component="div"
             count={userManagers && userManagers.length}
             rowsPerPage={rowsPerPage}
             page={page}
             onChangePage={handleChangePage}
             onChangeRowsPerPage={handleChangeRowsPerPage}
            />

the userManagers is the array containing all the data

Upvotes: 4

Views: 8452

Answers (1)

prcontra
prcontra

Reputation: 462

I know that this question is very old but this is happening because when the page renders (before getting data) the count prop value is equal to 0.

To solve this I just gave the value 0 to the page prop when the count is 0.

<TablePagination
    rowsPerPageOptions={[20]}
    colSpan={4}
    count={count}
    rowsPerPage={itemsPerPage}
    page={!count || count <= 0 ? 0 : page}
    SelectProps={{
      inputProps: {
         'aria-label': 'rows per page',
      },
      native: true,
    }}
    onPageChange={handleChangePage}
 />

Upvotes: 14

Related Questions