e.props.onChangePage - error coming up for 1.68.0

[ankursehdev]

I am using Material-table in react project and seeing e.props.onChangePage in my production when I click on the pagination.

I am including all the code above, I am not using this prop directly into my code but still facing this issue.

To Reproduce
Steps to reproduce the behavior:

I just click on the next button of the pagination and this error is showing up in the console.
and the user is not able to move to another page.

Expected behavior
User should be able to move to another page.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome and Mozilla, that is where I have tried and its similar on both browsers.

[EvanVujcec]

Yeah I'm having the same problem but I don't think this is a new problem as downgrading doesn't help.

My code for context:

const VendorList: React.FC<IVendorListProps> = (props) => {
  const [vendors, setVendors] = React.useState<IVendor[]>();
  const [alias, setAlias] = React.useState<string>();
  const [editAliases, setEditAliases] = React.useState<boolean>(false);

  React.useEffect(() => {
    SpApi.fetchVendors(setVendors);
  }, []);

  const selectVendor = (e, vendorSelected: IVendor): void =>
    props.setVendor(vendorSelected);

  return (
    <>
      {editAliases ? (
        <TextField
          label="Alias"
          variant="outlined"
          value={alias}
          onChange={(e) => setAlias(e.target.value)}
        />
      ) : null}
      {vendors ? (
        <>
          <MaterialTable
            title="Vendors List"
            columns={columns}
            data={vendors}
            icons={icons}
            onRowClick={editAliases ? null : selectVendor}
            onSelectionChange={(rows) => {
              console.log(rows);
            }}
            options={{
              // paging: false,
              draggable: false,
              selection: editAliases,
              rowStyle: (rowData: IVendor, index: number) => {
                let style: React.CSSProperties = {};
                if (!(index % 2)) {
                  style = {
                    ...style,
                    backgroundColor: styles.alternateRowColor,
                  };
                }
                return style;
              },
            }}
          />
        </>
      ) : (
        <CircularProgress />
      )}
    </>
  );
};

[isrhedden]

I am experiencing this issue as well in production. Interestingly, though, my code works locally (Windows OS).

I am using material-table v1.69.3 and @material-ui/core v4.12.2. I've used material-table plenty of times before without issue so I'm still working on what changed in this project.

[EvanVujcec]

@isrhedden yeah I just realized it was likely a mui/core issue as issues #2952 and #2935 seem to be related

[EvanVujcec]

For now, this seems to be the workaround #2937 (comment)

[ankursehdev]

@EvanVujcec That looks promising, I will try that but my whole application uses 20 different tables. I don't want to update them all.

Updating MUI/CORE is working for anyone?

[EvanVujcec]

@ankursehdev actually it's probably better to just move to the new project as this seems to be abandoned. It works and is just a drop in replacement for material-table, just update imports.

[ankursehdev]

Seems like a lot of apps are broken right now, I use React-table and Material Table, and pagination is broken in both of the tables.

Look here: mui/material-ui#27192

Hopefully, they will fix it soon.

@EvanVujcec when you move to the new project what does that mean? I am already using material-table 1.69.0, is there a newer version or a new repo?

[EvanVujcec]

Oh that would make sense since one of the changes in the fork is that they changed the name to match the breaking change cause they've been prepping it for mui-v5 migration

[EvanVujcec]

@ankursehdev Yes sorry I used the wrong link in previous post. It's just a fork of this project that's actually being maintained the new project. The only change you need to make after installing is updating imports to point to the new package. Also check over the breaking changes.

[jesperborgstrup]

The breaking change was reverted in @material-ui/core version 4.12.3: https://github.com/mui-org/material-ui/releases/tag/v4.12.3.

Upgrading to this version fixed the issue for me

[Table] Re-introduce deprecated TablePagination onChangePage to ActionsComponent (#27407) @eps1lon

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.