TypeError: _this.props.onChangePage is not a function

When I click on the pagination of material-table, I get the following error.

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

The environment in which this error occurs is as follows.

  • material-ui v4.12.2 v5 and later
  • material-table v1.69.3

In these combined environments, clicking on the pagination of material-table will cause an error.

In this article, I will show you the cause and solution of this error that occurs when you click on the pagination of the material-table.

目次

The solution is to use a self-made TablePagination.

Since TablePagination in material-table v1.69.3 cannot be used, you need to create a component as PatchedPagination and use it in MaterialTable for your own modified TablePagination.

The following is a sample code of PatchedPagination that I modified by myself.

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

The PatchedPagination component can be incorporated into the MaterialTable as follows.

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

The reason is that onChangePage of TablePagination was removed in material-ui v4.12.2 or later.

It is announced that onChangePage has been deprecated in TablePagination in material-ui v4.12.2.
You have to use onPageChange instead of onChangePage.

Deprecated. Use the onPageChange prop instead.

Callback fired when the page is changed.

https://material-ui.com/api/table-pagination/#props

In material-UI v5, the onChangePage of TablePagination has been completely removed.

In addition, onChangeRowsPerPage has been deprecated since material-UI v4.12.2.
Please use onRowsPerPageChange instead.

Reference

https://github.com/mbrn/material-table/pull/2937

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

エンジニアを目指す方必見!おすすめプログラミングスクール

最短でエンジニアになるには、いかに効率よく学習するかが重要です。モチベーションを維持しながら最短でエンジニアを目指すならプログラミングスクールを利用するのもおすすめです。

目次
閉じる