Extend support to @mui/material and @mui/icons-material v7

[svignesh-hbk]

material-react-table version

3.2.1

react & react-dom versions

19.1.0

Describe the bug and the steps to reproduce it

@mui/material and @mui/icons-material have major updates (v7). But, MRT expects that that the material ui deps are v6. This results in issues when running "npm install" after updating only the mui packages.

Minimal, Reproducible Example - (Optional, but Recommended)

npm i npm error code ERESOLVE npm error ERESOLVE could not resolve npm error npm error While resolving: [email protected] npm error Found: @mui/[email protected] npm error node_modules/@mui/icons-material npm error @mui/icons-material@"7.0.1" from the root project npm error peer @mui/icons-material@">=6" from [email protected] npm error node_modules/material-react-table npm error material-react-table@"3.2.1" from the root project npm error npm error Could not resolve dependency: npm error @mui/icons-material@"7.0.1" from the root project npm error npm error Conflicting peer dependency: @mui/[email protected] npm error node_modules/@mui/material npm error peer @mui/material@"^7.0.1" from @mui/[email protected] npm error node_modules/@mui/icons-material npm error @mui/icons-material@"7.0.1" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution.

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

None

Terms

• [x] I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[radu-buta]

@KevinVandy do you think MUI V7 will be supported in the near future? Are there any plans for the upgrade? Can we help somehow?

[KevinVandy]

From what I could tell, it's already supported. I'll eventually make an official upgrade soon.

[grayds]

Yeah, explicit support for the major might be useful. MUI now handles Dark Mode differently, and it looks like MRT doesn't totally hook into it.

[finngaida]

Are there already plans for the next version bump?

[alexferl]

@KevinVandy friendly bump. As @grayds mentioned, it works, but there is some issue with dark mode. Light mode seems to work fine as far as I can tell.

[Toshinaki]

Thanks for the great work! Not pushing, just wondering if we've got any progress.

[kmetta4]

We are facing the same issue. Light mode works great. But there are some issues with dark mode, especially on the table background

[p-hlp]

We are facing the same issue. Light mode works great. But there are some issues with dark mode, especially on the table background

@KevinVandy Same here, would love to know if there are any plans or ETA when V7 is officially supported. Considering moving over from raw tanstack table.

[Cristy94]

Trying to use MUI V7, but I get this error

Generic type 'TimePickerProps<TEnableAccessibleFieldDOMStructure>' requires between 0 and 1 type arguments.

    readonly muiFilterTimePickerProps?: _mui_x_date_pickers.TimePickerProps<never, false> | ((props: {
        column: MRT_Column<TData, unknown>;
        rangeFilterIndex?: number;
        table: MRT_TableInstance<TData>;
    }) => _mui_x_date_pickers.TimePickerProps<never>) | undefined;

@node_modules\.pnpm\[email protected]_lkih6juproaeg2gnvtsnun5h2i\node_modules\material-react-table\dist\index.d.ts

[Cristy94]

Any update on this? It seems to be just a TypeScript error to update to v7 (?).

Can the MUI v7 migration codemod simply be ran for the project?

MUI v7 migration: https://mui.com/material-ui/migration/upgrade-to-v7/

[shifoc]

From what I could tell, it's already supported. I'll eventually make an official upgrade soon.

@KevinVandy any update please? this was back in April

[singpolyma]

Another v7 feature that doesn't quite work as-is, when I use this theme:

const muiTheme = createTheme({                                                                                                                                               
   cssVariables: { nativeColor: true },                                                                                                                                      
   palette: {                                                                                                                                                                
      primary: {                                                                                                                                                             
         main: "var(--color-primary-dark)",                                                                                                                                  
      },                                                                                                                                                                     
      secondary: {                                                                                                                                                           
         main: "var(--color-secondary-dark)",                                                                                                                                
      },                                                                                                                                                                     
   },                                                                                                                                                                        
});

I get errors about this not being a supported colour, not it seems nativeColor is not being respected by the table.

[alexvuka1]

@KevinVandy just bumping this, any update would be greatly appreciated. Thanks again for the great library!