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

See original GitHub issue

When I have data of 4 rows to show in the table, and my rowsPerPage is set to 2, I have 2 pages available, if I navigate to page number 2, I see at the pagination panel 3-4 of 4 which makes sense, but when I change my data to an array of 2 rows, the pagination panel shows 3-2 of 2 which doesn’t make sense, and I am on page number 2 which is empty as my data array now has only 2 elements which are fit for 1 page only.

Expected Behavior

When the table data changes, the table should show the first page of the re-rendered data

Current Behavior

When the table data changes, the current page still shows regardless of the length of the new data array

Steps to Reproduce (for bugs)

I have created a Sandbox with minimal example to show the bug

Go to this link
Navigate to the second page
Click the button on top
You’ll see the message “Sorry, no matching records found.”, click the left arrow in the pagination panel.
NOW you’ll see the new data.

Environment

Tech	Version
Material-UI	4.0.1
MUI-datatables	2.3.0
React	16.8.6

Issue Analytics

State:
Created 4 years ago
Comments:11 (3 by maintainers)

Top GitHub Comments

2reactions

imballinstcommented, Aug 28, 2019

@gabrielliwerant All good! I just wanted to propose a solution for those who do not want to downgrade their Material UI version (in case there is someone who faces the same problem in the future).

2reactions

alielkhateebcommented, Aug 21, 2019

@joaquin3684 If you’re still facing this, please reopen and post a demo, my demo doesn’t reproduce the problem anymore, so I’ll close this.

Top Results From Across the Web

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

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

TablePagination warning when page is out of range #15616

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

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

When I have data of 4 rows to show in the table, and my rowsPerPage is set to 2, I have 2 pages...

TablePagination API - Material UI - MUI

API reference docs for the React TablePagination component. Learn about the props, CSS, and other APIs of this exported module.

front-end/node_modules/@material-ui/styles/CHANGELOG.md

[Autocomplete] Add new handleHomeEndKeys prop (#20910) @p00000001 ... [TablePagination] Only raise a warning when the page is out of range (#14534) @leMaik.