Upgrade to Material-UI 5 #1772

zxhmike · 2021-09-01T20:05:29Z

Make mui-datatables to be compatible with Material-UI 5. The target version is 5.0.1. The version of the mui-datatables itself is not bumped yet.

Followed migration instructions on this page: https://next.material-ui.com/guides/migration-v4/
Also used the codemod here: https://github.com/mui-org/material-ui/blob/next/packages/material-ui-codemod/README.md#mui-replace

Changes:

Use createTheme and ThemeProvider instead of createMuiTheme, MuiThemeProvider.
Use ThemeProvider instead of MuiThemeProvider.
Import withStyles, makeStyles from @mui/styles instead of @material-ui/core/styles.
Added ThemeProvider to the root of the examples page.
Upgrade material-ui/core, icons versions to 5.0.0-rc.0. Add @material-ui/styles version 5.0.0-rc.0.
Use @wojtekmaj/enzyme-adapter-react-17 instead of enzyme-adapter-react-16. Caution: This is an unofficial package. Cannot find an official enzyme adapter for react 17.
Upgrade next version to 11.1.2.
Upgrade react and react-dom versions to 17.0.2.
Upgrade react-waypoint version to 10.1.0.
Upgrade rollup version to 2.3.4. Since rollup-plugin-uglify is not compatible with rollup version 2, use @lopatnov/rollup-plugin-uglify instead. Caution: This is an unofficial package. Cannot find an official rollup uglify plugin in version 2. Also add rollup-pluginutils as the dependency of the new rollup uglify plugin.
Add @emotion/react and @emotion/styled as required by Material-UI 5.
Use react-sortable-tree-patch-react-17 instead of react-sortable-tree. Caution: This is an unofficial package.

~~Known Issues:~~

Able to bring up https://localhost:5050 after running npm run dev and run most examples except the following examples:

~~Column Filters: Showing "Sorry, no matching records found".~~ Upon further review, this seems expected. Remove a filter to show data. Please confirm.
~~Column Option Update: Showing "Sorry, no matching records found".~~ Upon further review, this seems expected. Remove a filter to show data. Please confirm.
~~Component: Does not render.~~ Fixed by adding empty labels to FormControlLabel components. Reference: https://next.material-ui.com/guides/migration-v4/#formcontrollabel

~~We are looking into the above issues.~~ Please let us know what else need to be tested. Thank you.

Reference: https://next.material-ui.com/guides/migration-v4/#formcontrollabel

For prettier > 2.0 See: prettier/prettier-vscode#1299

HaimBendanan · 2021-09-13T22:34:49Z

How are you progressing with this PR? Thanks for handling that 👍!

zxhmike · 2021-09-15T01:54:09Z

This PR is actually ready for review and merge. Please let me know what the next step is. Feedbacks welcome. Thanks.

luluhoc · 2021-09-17T15:08:34Z

I hope this will get merged soon as I want to move my project to v5.

jasonlew · 2021-09-21T12:19:00Z

Also eagerly awaiting this 😁

luluhoc · 2021-09-28T15:59:06Z

@zxhmike I build your pr myself and put in my project but when I go to the route with mui datatables it removes almost all of my styles from my app.

zxhmike · 2021-09-28T16:06:53Z

@luluhoc Thanks for the update. Do you see any errors/warnings in the console? We compiled our own project using this branch and it is fine so far.

AlonMiz · 2021-09-28T16:54:18Z

Also eagerly awaiting this 😁

+1

luluhoc · 2021-09-28T18:49:25Z

@luluhoc Thanks for the update. Do you see any errors/warnings in the console? We compiled our own project using this branch and it is fine so far.

It was my fault, but now I can't do table pagination I'm getting, or change rows per page. Even in the examples page it is not working for me.

Uncaught TypeError: onPageChange is not a function
    at handleNextButtonClick (TablePaginationActions.js?4da9:46)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:3994)
    at invokeGuardedCallback (react-dom.development.js?61bb:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?61bb:4070)
    at executeDispatch (react-dom.development.js?61bb:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js?61bb:8275)
    at processDispatchQueue (react-dom.development.js?61bb:8288)
    at dispatchEventsForPlugins (react-dom.development.js?61bb:8299)
    at eval (react-dom.development.js?61bb:8508)

luluhoc · 2021-09-28T22:05:19Z

@zxhmike I submitted a PR to your branch, please review. It is working for me now.

pisrcio#1

zxhmike · 2021-09-29T14:41:50Z

Hi @luluhoc ,

Thanks for this PR. I saw that you changed something in the TablePagination.js file. However, if you look at our PR to mui-datatables (#1772), we did not make any change in those two lines (see the screenshot below), so this does not seem to be a bug we introduced while upgrading to mui 5. If you feel like it is a different bug, could you please create a new PR to mui-datatables instead? Thank you.

luluhoc · 2021-09-29T15:29:34Z

Hi @luluhoc ,

Thanks for this PR. I saw that you changed something in the TablePagination.js file. However, if you look at our PR to mui-datatables (#1772), we did not make any change in those two lines (see the screenshot below), so this does not seem to be a bug we introduced while upgrading to mui 5. If you feel like it is a different bug, could you please create a new PR to mui-datatables instead? Thank you.

Naming of this two props was changed in this commit mui/material-ui@ab33be8#diff-a88e6d0575e76796d2fdea671ed8b3620762fbd4e4cdcfc01677fc4f3be6fadb
I think you should consider accepting this PR.

Co-authored-by: luluhoc <lucjan.grzesik@gmail.com>

zxhmike · 2021-10-01T18:42:55Z

Hi @luluhoc ,

I see. MUI changed its API when upgrading to version 5. I have already merged into this branch. Thanks again for the contribution.

Besides these two changes, are you aware of any other API changes of MUI that we should aware of when upgrading mui-datatables to support MUI v5? Or if you know such a changelist exist, please point us to. We would like to do a scan of mui-datatables code base to see if anything else if affected. Thanks.

Mike

aidiss · 2021-10-04T14:12:51Z

Thank you for wonderful work

JonJoyce · 2021-10-06T14:34:18Z

Is there any ETA for getting this merged? Working on MUI5 updates now and this is the only blocker.

luluhoc · 2021-10-07T11:04:15Z

Hi @luluhoc ,

I see. MUI changed its API when upgrading to version 5. I have already merged into this branch. Thanks again for the contribution.

Besides these two changes, are you aware of any other API changes of MUI that we should aware of when upgrading mui-datatables to support MUI v5? Or if you know such a changelist exist, please point us to. We would like to do a scan of mui-datatables code base to see if anything else if affected. Thanks.

Mike

Yes, I have one more problem I will try to do a PR later.

Overall, I've been running this PR in production, and I haven't encountered any problems whatsoever.

@zxhmike

this is the error I'm getting

Warning: React does not recognize the `buttonRef` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `buttonref` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

d-knafo · 2021-10-11T14:26:04Z

+1

yaniv-upstream · 2021-10-12T07:08:53Z

@gregnb help us her. please

kvlknctk · 2021-10-12T09:06:53Z

This PR required and important. We can't use it like this.

ashfaqnisar · 2021-10-14T06:01:00Z

Fixed most of the visible issues with this pisrcio#2. If anyone connects it to their project and finds any other issues, would be happy to help!

shaun-scale · 2021-10-15T00:02:47Z

I am new-ish to React, but just tried to pull this specific branch in because I was noticing what I imagine were CSS conflicts between MUI 5 and MUI 4 when muitable was being rendered.

Anyways, I now get the following exception on page load:

My table is simply like

const tableOptions = {
  filterType: "textField",
  print: false,
  selectableRows: "none",
  sortOrder: { name: "Description", direction: "asc" },
};

const columns = [
  "Name",
  "Description",
  {
    name: "Details",
    options: {
      filter: true,
      sort: false,
      download: false,
    },
  },
];

<MUIDataTable
  title={"Products"}
  data={productData}
  columns={columns}
  options={tableOptions}
/>

Could just be user error, but wanted to share if helpful

ashfaqnisar · 2021-10-15T07:18:24Z

Hey @shaun-scale, I tried to reproduce the error but was not unable to do that. Would be able to share a code sandbox ?
While reproducing this error, found out that we need to increase the theme breakpoint down by one step as provided here in the migration guide.

d-knafo · 2021-10-15T07:27:09Z

@gregnb please merge

ashfaqnisar · 2021-10-15T19:27:16Z

Hey @gregnb, It would be great, if you merge the PR! 😀

shaun-scale · 2021-10-15T19:47:17Z

Let's chalk it up to user error then - but glad we found some other issues to address :)

shaun-scale · 2021-10-15T20:05:27Z

It may be helpful to google "LinkedIn Gregnb" - maybe his Github email isn't used by him anymore :)

HeavenlyEntity · 2021-10-15T21:06:44Z

Issue: #1791 is currently breaking the production release of the library please push an update. 🙆‍♂️

pretty sure 50% of all issues will disappear after this merge. Waiting....lol

Grant a trusted contributor write access to merge, please 😫

igor-pavlichenko · 2021-10-18T10:21:23Z

Yes, I have one more problem I will try to do a PR later.

Overall, I've been running this PR in production, and I haven't encountered any problems whatsoever.

@zxhmike

this is the error I'm getting
Warning: React does not recognize the `buttonRef` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `buttonref` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

@luluhoc
buttonRef has been renamed to just ref https://github.com/mui-org/material-ui/releases/tag/v5.0.0-alpha.32

HeavenlyEntity · 2021-10-18T16:59:29Z

Yes, I have one more problem I will try to do a PR later.
Overall, I've been running this PR in production, and I haven't encountered any problems whatsoever.
@zxhmike
this is the error I'm getting
Warning: React does not recognize the `buttonRef` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `buttonref` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
@luluhoc buttonRef has been renamed to just ref https://github.com/mui-org/material-ui/releases/tag/v5.0.0-alpha.32

If this is added to PropTypes you should be fine. But this "error" is not such an error but a warning. You can still proceed to use that functional prop as intended. This warning is common amongst lots of UI libraries. It can be fixed only by the contributors if you're mui component is on a page and not a separate component file and exported. It will show in the console as it's not recognized by React after compilation so it passes through to the native browser. When the page mounts bable is the one that will ultimately recognize the prop on the component to not throw that warning. You can disregard it or if you're making this your own custom component in a file be sure to add it to our PropTypes so it disappears.

gnowland · 2021-10-18T22:14:36Z

@HeavenlyEntity while technically correct, the underlying issue would also be fixed once #1748 is merged, renaming the now-non-existent buttonRef prop to ref on the IconButton component.

FYI regarding the comments about finding gregnb on linkedin - it looks like @gabrielliwerant took over as maintainer somewhere around Jan 2019, then @patorjk became the maintainer on May 30, 2020 and subsequently handed maintainer responsibility to @wdh2100 on Mar 10, 2021.

HeavenlyEntity · 2021-10-19T00:04:45Z

@HeavenlyEntity while technically correct, the underlying issue would also be fixed once #1748 is merged, renaming the now-non-existent buttonRef prop to ref on the IconButton component.

FYI regarding the comments about finding gregnb on linkedin - it looks like @gabrielliwerant took over as maintainer somewhere around Jan 2019, then @patorjk became the maintainer on May 30, 2020 and subsequently handed maintainer responsibility to @wdh2100 on Mar 10, 2021.

Yeah makes sense just needs to be updated. @wdh2100 , @gabrielliwerant , or @patorjk could you merge this PR as it is ready? The next PR to merge is the #1748 after this one to remove props/PropTypes. All new installs are breaking from the new mui update. Please and thank you 👍 😁

mikejlachlan · 2021-10-20T23:17:37Z

Really itching for this one 🤞

luciano-fiandesio · 2021-10-21T21:08:52Z

Any reason this PR is getting ignored by the mantainers?

garciabruno · 2021-10-22T04:06:04Z

Would be really nice to have this.

wdh2100 · 2021-10-25T12:30:24Z

Release 4.0.0

@zxhmike, @gonsaje, @luluhoc, @ashfaqnisar

ashfaqnisar · 2021-10-25T12:33:14Z

Release 4.0.0

@zxhmike, @gonsaje, @luluhoc, @ashfaqnisar

Thanks for merging this @wdh2100, you're the GOAT!

Cirelion · 2021-10-25T13:17:15Z

@wdh2100 After updating to 4.0.0 it breaks for me when using SSR, could this be due to the release? If so, I'll create a issue for it.

ianpavlovski · 2021-10-27T06:58:20Z

who knows when will be updated @types/mui-datatables?

Volutionn · 2021-10-27T13:20:56Z

Thanks for this upgrade!

ozzyonfire · 2021-10-29T14:45:03Z

I'm also having trouble with SSR using this version #1806

Bhuvanesh-git331 · 2022-04-07T08:11:34Z

@zxhmike Will MUI-Datatable be compatable with MUI 5.2.3 v? because we are using mui 5.2.3 v on our project and planning use the MUI-Datatable. So throw some light on this.

Also I have shared my code sandbox link: https://codesandbox.io/s/mui-datatable-example-forked-7lu7ue?file=/src/App.js for reference.

Thanks.

Upgrade to material-ui beta.5

76ed97d

zxhmike mentioned this pull request Sep 1, 2021

Is there a plan of migration to material-ui v5? #1513

Open

zxhmike added 4 commits September 6, 2021 12:39

Upgrade to mui-5.0.0-rc.0

05ed8fc

Add empty labels to FormControlLabel components

66e3820

Reference: https://next.material-ui.com/guides/migration-v4/#formcontrollabel

Update prettier configuration

f7c487f

For prettier > 2.0 See: prettier/prettier-vscode#1299

Update peer dependencies to @mui 5.0.0-rc.0

d0df907

luluhoc mentioned this pull request Sep 24, 2021

Support MUI 5 #1785

Open

update mui to 5.0.1

09bdc4e

wrong named props mui5 fix (#1)

0f372cd

Co-authored-by: luluhoc <lucjan.grzesik@gmail.com>

wyrustaaruz approved these changes Oct 4, 2021

View reviewed changes

CLu1s mentioned this pull request Oct 12, 2021

Can't resolve '@material-ui/icons/Clear in mui-datatables/dist #1791

Closed

kvlknctk approved these changes Oct 12, 2021

View reviewed changes

ashfaqnisar mentioned this pull request Oct 14, 2021

Fixed the issue with the variant of sort button. pisrcio/mui-datatables#2

Merged

Centered the search icon with the textfield & other icons

7e519ea

Merge pull request #2 from ashfaqnisar/mui5

9b70f9c

Updated the theme breakpoint down by one step

9d85b68

Merge pull request #3 from ashfaqnisar/mui5

30fa456

mattshoaf mentioned this pull request Oct 22, 2021

fix(#1747): Replace deprecated props in mui based components #1748

Merged

wdh2100 added the material ui 5.0 label Oct 25, 2021

wdh2100 merged commit 1f96a2d into gregnb:master Oct 25, 2021

Upgrade to Material-UI 5 #1772

Upgrade to Material-UI 5 #1772

Conversation

zxhmike commented Sep 1, 2021 • edited Loading

HaimBendanan commented Sep 13, 2021

zxhmike commented Sep 15, 2021

luluhoc commented Sep 17, 2021

jasonlew commented Sep 21, 2021

luluhoc commented Sep 28, 2021 • edited Loading

zxhmike commented Sep 28, 2021

AlonMiz commented Sep 28, 2021

luluhoc commented Sep 28, 2021 • edited Loading

luluhoc commented Sep 28, 2021 • edited Loading

zxhmike commented Sep 29, 2021

luluhoc commented Sep 29, 2021 • edited Loading

zxhmike commented Oct 1, 2021

aidiss commented Oct 4, 2021

JonJoyce commented Oct 6, 2021

luluhoc commented Oct 7, 2021 • edited Loading

d-knafo commented Oct 11, 2021

yaniv-upstream commented Oct 12, 2021

kvlknctk commented Oct 12, 2021

ashfaqnisar commented Oct 14, 2021

shaun-scale commented Oct 15, 2021

ashfaqnisar commented Oct 15, 2021

d-knafo commented Oct 15, 2021

ashfaqnisar commented Oct 15, 2021 • edited Loading

shaun-scale commented Oct 15, 2021

shaun-scale commented Oct 15, 2021

HeavenlyEntity commented Oct 15, 2021 • edited Loading

igor-pavlichenko commented Oct 18, 2021 • edited Loading

HeavenlyEntity commented Oct 18, 2021 • edited Loading

gnowland commented Oct 18, 2021 • edited Loading

HeavenlyEntity commented Oct 19, 2021 • edited Loading

mikejlachlan commented Oct 20, 2021

luciano-fiandesio commented Oct 21, 2021

garciabruno commented Oct 22, 2021

wdh2100 commented Oct 25, 2021 • edited Loading

ashfaqnisar commented Oct 25, 2021

Cirelion commented Oct 25, 2021

ianpavlovski commented Oct 27, 2021

Volutionn commented Oct 27, 2021

ozzyonfire commented Oct 29, 2021

Bhuvanesh-git331 commented Apr 7, 2022

zxhmike commented Sep 1, 2021 •

edited

Loading

luluhoc commented Sep 28, 2021 •

edited

Loading

luluhoc commented Sep 28, 2021 •

edited

Loading

luluhoc commented Sep 28, 2021 •

edited

Loading

luluhoc commented Sep 29, 2021 •

edited

Loading

luluhoc commented Oct 7, 2021 •

edited

Loading

ashfaqnisar commented Oct 15, 2021 •

edited

Loading

HeavenlyEntity commented Oct 15, 2021 •

edited

Loading

igor-pavlichenko commented Oct 18, 2021 •

edited

Loading

HeavenlyEntity commented Oct 18, 2021 •

edited

Loading

gnowland commented Oct 18, 2021 •

edited

Loading

HeavenlyEntity commented Oct 19, 2021 •

edited

Loading

wdh2100 commented Oct 25, 2021 •

edited

Loading