TypeError: _this.props.onChangePage is not a function

programming
スポンサーリンク
language

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

deprecated @material-ui/core prop-type updates by matthoffner · Pull Request #2937 · mbrn/material-table
Related Issue #2935 Description Prop type updates from @material-ui/core deprecated prop types: Updates onChangePage to onPageChange Updates onChangeRowsPerPa...
タイトルとURLをコピーしました