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

[alielkhateeb]

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

1. Go to this link
2. Navigate to the second page
3. Click the button on top
4. You'll see the message "Sorry, no matching records found.", click the left arrow in the pagination panel.
5. NOW you'll see the new data.

Environment

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

[thanhle98]

I am having the same issue, I figured out downgrading to 2.0.0 will fix the error. But I need some 2.3.0 features. Please fix this soon.

[gabrielliwerant]

@alielkhateeb This is actually due to your material version being too high. The highest version currently supported by this library is 3.5.1. If you change to that version, you will not experience this issue.

[joaquin3684]

i have the same issue. i had @material-ui/core 3.9.3. i downgrade to 3.5.1 but nothing change

[gabrielliwerant]

The issue is not reproducible via the link and the codesandbox provided:

@joaoaguiam You may have this issue https://github.com/gregnb/mui-datatables/issues/718.

[alielkhateeb]

@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.

[Imballinst]

@alielkhateeb I think your demo doesn't reproduce the problem because in the demo, you used "@material-ui/core": "3.5.1", while in your first post, you said you are using Material-UI | 4.0.1 (?)

I faced this problem just now -- my use case is:

1. There are 2 tabs, let's say that they are TabA and TabB
2. Inside the tab, there is this table component. TabA has 3 pages, while TabB only has 1 page.
3. In TabA, I navigate to the 3rd page of the table. When I click on TabB, it outputs this same error because the page from previous state still persists.

I do not want to downgrade my Material UI because I invested a lot in the Hooks API already. So, in my Tab change handler, I use this:

function handleChange(event: React.ChangeEvent<{}>, newValue: number) {
  setIntermediateState({
    nextValue: newValue,
    loading: true
  });

  setTimeout(() => {
    setIntermediateState({
      nextValue: -1,
      loading: false
    });

    setValue(newValue);
  }, 0);
}

// ...in the logic below.
if (intermediateState.loading) {
  // This is my custom component, you can use other stuff as you like, e.g. spinner/progress bar.
  content = <SkeletonFrame height={38.05} width="100%" />;
} else {
  // Render the table.
}

Now, this works because in the source code: https://github.com/gregnb/mui-datatables/blob/d1914e4156aea4ff7d6d8ad9794da3ca4b156758/src/MUIDataTable.js#L222-L239

It only re-sets the pagination if filter text changes. As such, we need to "force" the table to re-render -- how? By removing it from the DOM tree real quick (hence the setTimeout 0), so the table is unmounted completely. This is not possible without the setTimeout because React will "batch" the state update if state changes are done synchronously -- therefore our view will not see a change. However, by making it asynchronous, React will skip the state batching update (this is my understanding so far).

After these changes:

1. I am on TabA
2. I click until I reach Page 3 of Table in TabA
3. I click TabB
4. Depending on my PC speed at that moment, there might be a slight Skeleton Frame appearing in the screen -- but sometimes it may load instantly as well.
5. The Table on TabB now starts at Page 1.

Let me know if you want a demo of this for v4 Material UI -- hopefully I can reproduce the solution on CodeSandbox.

[gabrielliwerant]

@Imballinst This tab issue does not sound like the same issue as first posted here. I don't think your use case of keeping multiple versions of the same table across tabs in sync has been in consideration. Feel free to open a new issue on it with a codesandbox example, however, this probably won't be high on the priority list for a while if it turns out that it's specific to the tab issue because this seems like an uncommon use case, and there would be more pressing short term issues.

[Imballinst]

@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).

[shamseerahammedm]

I'm facing this issue,
1) I'm on last page in table,
2) from last page in table, i'm refetching and updating the data thats served to the table,
3) my table just collapses displaying nothing but data is there and i see the same error in the console

[KrystalY]

@shamseerahammedm

check this out 😉

totalCount && (
<TablePagination
  rowsPerPageOptions={[5, 10, 25]}
  component="div"
  count={(totalCount)}
  rowsPerPage={(pageSize)}
  page={(pageNo)}
  onChangePage={handleChangePage}
  onChangeRowsPerPage={handleChangeRowsPerPage}
/>
)