Add support for DefinitelyTyped when using MUI5 and TS

[arvebratt]

Expected Behavior

The latest version of DefinitelyTyped/mui-datatables uses

• @material-ui/core: 4.11.3
• @material-ui/types: 5.1.0 as dependencies.

This is an issue if you want to use MUI5, mui-datatables and DefinitelyTyped together since @material-ui/core and @mui/material can not be dependencies in the same project.

Current Behavior

In DefinitelyTyped/mui-datatables package.json { "private": true, "dependencies": { "@material-ui/core": "^4.11.3", -> @mui/material "@material-ui/types": "5.1.0" -> @mui/types } }

Your Environment

Tech	Version
Material-UI	5.2
MUI-datatables	4.0.0
React	17.2
TypeScript	4.3.2

[mRamzii]

+1 Facing the same issue, types have MaterialUi 4.x as peer dependency

[TristanHoladay]

Running into the same problem.

[LuisAlejandro]

I also have the same problem. What needs to be done? submit an issue to DefinitelyTyped?

[AlonMiz]

what would it take to migrate this lib to Typescript... then we don't need to chaise DefinitelyTyped on each change.

[mRamzii]

As temporary workarounds : I have managed to workaround this by styling MUI's native Table (MuiTable, MuiTableBody etc..) instead, seems like MuiDataTable inherits style classes from it, with some adjustments managed to get the style I wanted.

You could also ignore the typing on the createTheme()

[AlonMiz]

here's a snippet for making the custom components work

import { ComponentsOverrides } from '@mui/material';

declare module '@mui/material/styles' {
  interface ComponentNameToClassKey {
    MUIDataTableHeadCell:
      | 'root'
      | 'contentWrapper'
      | 'data'
      | 'dragCursor'
      | 'fixedHeader'
      | 'hintIconAlone'
      | 'hintIconWithSortIcon'
      | 'mypopper'
      | 'sortAction'
      | 'sortActive'
      | 'sortLabelRoot'
      | 'toolButton'
      | 'tooltip';
    MUIDataTable:
      | 'root'
      | 'caption'
      | 'liveAnnounce'
      | 'paper'
      | 'responsiveScroll'
      | 'tableRoot'
      | 'responsiveBase'; // not sure it's there

    MUIDataTableToolbar:
      | 'root'
      | 'actions'
      | 'filterCloseIcon'
      | 'filterPaper'
      | 'fullWidthActions'
      | 'fullWidthLeft'
      | 'fullWidthRoot'
      | 'fullWidthTitleText'
      | 'icon'
      | 'iconActive'
      | 'left'
      | 'searchIcon'
      | 'titleRoot'
      | 'titleText';
  }

  interface Components<Theme = unknown> {
    MUIDataTableHeadCell?: {
      styleOverrides?: ComponentsOverrides<Theme>['MUIDataTableHeadCell'];
    };
    MUIDataTable?: {
      styleOverrides?: ComponentsOverrides<Theme>['MUIDataTable'];
    };
    MUIDataTableToolbar?: {
      styleOverrides?: ComponentsOverrides<Theme>['MUIDataTableToolbar'];
    };
  }
}