TypeError: _this.props.onChangePage is not a function

2022年6月15日

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.