deprecated @material-ui/core prop-type updates

[matthoffner]

Related Issue

#2935

Description

Prop type updates from @material-ui/core deprecated prop types:

• Updates onChangePage to onPageChange
• Updates onChangeRowsPerPage to onRowsPerPageChange

[matthoffner]

Hi @mbrn this is a PR to fix #2935 with the latest @material-ui/core updates in 4.12.0 causing prop type errors. It would be great if we can get a release out soon with this, thanks!

[IniterWorker]

Hi,

I agree with @matthoffner this merge request needs to be released as soon as possible.

Good work,

[ssp5zone]

That's weird. mat-ui removed a deprecation in a minor release! That could (and will) break stuff for people if mat-ui dependency is not patch limited.

Anyways, thanks @matthoffner; was going to make this change until I saw your PR.

[srikanthj09]

Hi,

can we get this fix release asap,

[chelproc]

For those who can't wait for this PR to be released, I wrote a small TablePagination patch.

import MaterialTable, { MaterialTableProps } from 'material-table';
import { TablePagination, TablePaginationProps } from '@material-ui/core';

function PatchedPagination(props: TablePaginationProps) {
  const {
    ActionsComponent,
    onChangePage,
    onChangeRowsPerPage,
    ...tablePaginationProps
  } = props;

  return (
    <TablePagination
      {...tablePaginationProps}
      // @ts-expect-error onChangePage was renamed to onPageChange
      onPageChange={onChangePage}
      onRowsPerPageChange={onChangeRowsPerPage}
      ActionsComponent={(subprops) => {
        const { onPageChange, ...actionsComponentProps } = subprops;
        return (
          // @ts-expect-error ActionsComponent is provided by material-table
          <ActionsComponent
            {...actionsComponentProps}
            onChangePage={onPageChange}
          />
        );
      }}
    />
  );
}

Then you can use this like:

<MaterialTable
  components={{
    Pagination: PatchedPagination,
  }}
/>

[ap705]

Hey, I'm also waiting for this fix to be merged! Could somebody approve it by any chance? Thanks !

Thanks @chelproc for the temporary fix!

[Beta-7]

From what i gathered from the gitter chat the project has been abandoned and replaced by https://github.com/material-table-core/core. Someone feel free to correct me and i will remove the comment.

[manjuprem12]

This is blocking us from releasing the latest version of our product. would appreciate this merge the earliest.

[matthoffner]

Hello @mbrn could you prioritize reviewing and releasing this to keep this project working with latest material ui changes.

This PR is scoped to fixing a small bug change only, as specifically stated in the README. Thanks.

[arshkkk]

For those who can't wait for this PR to be released, I wrote a small TablePagination patch.

import MaterialTable, { MaterialTableProps } from 'material-table';
import { TablePagination, TablePaginationProps } from '@material-ui/core';

function PatchedPagination(props: TablePaginationProps) {
  const {
    ActionsComponent,
    onChangePage,
    onChangeRowsPerPage,
    ...tablePaginationProps
  } = props;

  return (
    <TablePagination
      {...tablePaginationProps}
      // @ts-expect-error onChangePage was renamed to onPageChange
      onPageChange={onChangePage}
      onRowsPerPageChange={onChangeRowsPerPage}
      ActionsComponent={(subprops) => {
        const { onPageChange, ...actionsComponentProps } = subprops;
        return (
          // @ts-expect-error ActionsComponent is provided by material-table
          <ActionsComponent
            {...actionsComponentProps}
            onChangePage={onPageChange}
          />
        );
      }}
    />
  );
}

Then you can use this like:

<MaterialTable
  components={{
    Pagination: PatchedPagination,
  }}
/>

This quick fix is increasing bundle size from 128kb to 400kb

[orinoco]

If you end up here like I did, check out https://github.com/material-table-core/website/blob/master/docs/getting-started/material-ui-v5.mdx

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

[thisisglee]

For those who need @chelproc Javascript not type script version

`import MaterialTable from 'material-table';
import { TablePagination } from '@material-ui/core';

//javascript version
function PatchedPagination(props) {
const { ActionsComponent, onChangePage, onChangeRowsPerPage, ...tablePaginationProps } = props;

return (
<TablePagination
{...tablePaginationProps}
// @ts-expect-error onChangePage was renamed to onPageChange
onPageChange={onChangePage}
onRowsPerPageChange={onChangeRowsPerPage}
ActionsComponent={(subprops) => {
const { onPageChange, ...actionsComponentProps } = subprops;
return (
// @ts-expect-error ActionsComponent is provided by material-table
<ActionsComponent {...actionsComponentProps} onChangePage={onPageChange} />
);
}}
/>
);
}`

[Alayanos]

_this.props.data is not a function