TypeError: _this.props.onChangePage is not a function

2022年6月15日

material-tableのページネーションをクリックすると以下のエラーが出るようになりました。

Unhandled Runtime Error
TypeError: _this.props.onChangePage is not a function

このエラーが発生する環境は以下の通りです。

material-ui v4.12.2 v5以降
material-table v1.69.3

これらの組み合わせの環境ではmaterial-tableのページネーションをクリックするとエラーが発生します。

この記事ではmaterial-tableのページネーションをクリックする発生するこのエラーの原因と解決方法をご紹介します。

解決方法は自作のTablePaginationを使う

material-table v1.69.3のTablePaginationが使えないので、自作で修正したTablePaginationはPatchedPaginationとしてコンポーネントを作りMaterialTableで使う必要があります。

自作で修正したPatchedPaginationのサンプルコードは以下の通りです。

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

export 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}
					/>
				);
			}}
		/>
	);
}

PatchedPaginationコンポーネントは以下のようにしてMaterialTableに組み込むことができます。

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

原因はmaterial-ui v4.12.2以降でTablePaginationのonChangePageが削除されたから

material-ui v4.12.2のTablePaginationでonChangePageが非推奨となったことが案内されています。
onChangePageの代わりにonPageChangeを使わなければいけません。

Deprecated. Use the onPageChange prop instead.
Callback fired when the page is changed.
非推奨。代わりにOnPageChange Propを使用してください。
ページが変更されたときに発生するコールバックです。
https://material-ui.com/api/table-pagination/#props

material-UI v5ではTablePaginationのonChangePageが完全に削除されています。

他にもonChangeRowsPerPageがmaterial-UI v4.12.2から非推奨となっています。
代わりにonRowsPerPageChangeを使うようにしてください。