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]
  }}
/>

Solution 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!

Solution 2

For me I managed to solve this by removing an old material-ui module and installing a new one

1. npm remove material-table
2. npm install @material-table/core

And then in the code replace

import MaterialTable from 'material-table';

with

import MaterialTable from '@material-table/core';

kudos to @Chris Livdahl answer

Solution 3

I'm finding that the material-table repository is not kept up-to-date with the latest Material UI changes. Instead, take a look at the fork of material-table here: https://github.com/material-table-core/core, support for Material UI v4, with a "next" version in the works for v5.

Changing the code was very easy to adapt to the new repository. Follow the instructions here: https://material-table-core.com/docs

Comments

[alisasani]

where is the table pagination is your code? is this the code that return an error?

[Monish N]

So basically I am using a component library "material-table" which requires to install another dependency material-ui core library. In the material ui core library the implementation for table pagination is throwing the following errors that I have mentioned above.

[Ashok]

Did you get it working @knock out

[Monish N]

No. So basically I was using a beta version of material ui (a paid/licensed template). Which does not support the material-table. So we implemented our own custom component that can handle the pagination logic.

[Stephen Melben Corral]

I encountered a somewhat related issue with TablePagination from material-ui, specifically on the onRowsPerPageChange props, for me, upgrading the version fixed my issue.

[MuKa]

We migrated to material-table/core and have installed the version with the 'next' tag as we are upgrading the material-ui v5. The warnings haven't seem to have gone away.