Material UI material-table TablePagination issue. (React)

Question

I am using material-table. The TablePagination is not working. It throws an error in console.

I tried installing the package as per the documentation.

https://material-table.com/#/docs/install

npm install material-table --save
npm install @material-ui/core --save

And I get getting this errors:

Material-UI: The key caption provided to the classes prop is not implemented in ForwardRef(TablePagination). You can only override one of the following: root,toolbar,spacer,selectLabel,selectRoot,select,selectIcon,input,menuItem,displayedRows,actions.

Warning: Failed prop type: The prop onPageChange is marked as required in ForwardRef(TablePagination), but its value is undefined.

Warning: Unknown event handler property onChangePage. It will be ignored.

Warning: Unknown event handler property onChangeRowsPerPage. It will be ignored.

versions:

"@material-ui/core": "^5.0.0-alpha.24",
"material-table": "^1.69.2",

If I try to paginate it throws error in console.

Uncaught TypeError: _this.props.onChangePage is not a function

Sample Code:

 <MaterialTable
  icons={tableIcons}
  columns={columns}
  data={editable}
  title="Orders"
  localization={{
    toolbar: {
      searchPlaceholder: 'Filter',
      searchTooltip: 'filters the given text'
    },
    header: {
      actions: 'Actions'
    }
  }}
  actions={[
    {
      icon: 'save',
      tooltip: 'Save User',
      onClick: (event, rowData) =>
        alert('You saved ' + rowData.name)
    }
  ]}
  options={{
    actionsColumnIndex: -1,
    selection: true,
    exportButton: true,
    showFirstLastPageButtons: true,
    pageSize: 5,
    padding: 'dense',
    pageSizeOptions: [5, 20, 50]
  }}
/>

Answer 1

I came across the same issue. For me, it is caused due to latest version of @material/[email protected], Due to deprecated methods in TablePagination. As material-table uses this and not upgraded these deprecated methods it is throwing the error.

I was able to solve this by downgrading @material-ui/core version to 4.11.4 and keeping the material-table version to 1.69.3. On the other hand, as @knock-out has mentioned. You can create your own material-table component. Just change the -version

Hope this is helpful!