responsiveStacked Cannot read properties of undefined (reading 'down')

[KianoJ]

Since the update my table does not work and I've got this error

TypeError: Cannot read properties of undefined (reading 'down')
defaultTableStyles
src/MUIDataTable.js:59

  56 |   height: '100%',
  57 | },
  58 | // deprecated, but continuing support through v3.x
> 59 | responsiveStacked: {
     | ^  60 |   overflow: 'auto',
  61 |   [theme.breakpoints.down('md')]: {
  62 |     overflow: 'hidden',

Expected Behavior

Table should render like before

Your Environment

Tech	Version
Material-UI	5.0.6
MUI-datatables	4.0.0
React	17.0.2
browser	Edge

[mattshoaf]

@MGMehdi I just updated, saw that error once and something I did otherwise updating to MUI5 handled this.
I followed the migration steps, including the codemods: https://mui.com/guides/migration-v4/#run-codemods

I added this wrapper for my app:

import { ThemeProvider, createTheme, StyledEngineProvider } from '@mui/material/styles';

const theme = createTheme();

export default function App() {

  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
         ...

I already already was using up and down in my theme overwrides, codemod updated it from what I had before to this::

const theme = createTheme(adaptV4Theme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920,
    },
  },
}))

const tableTheme = () => createTheme(adaptV4Theme({
  overrides: {
    MUIDataTableFilter: {
      resetLink: {
        color: 'transparent',
        width: 100,
        '&::after': {
          content: '"Clear All"',
          color: '#3f51b5',
          position: 'absolute',
          width: 100,
          left: -10,
        },
      },
    },
    MUIDataTableFilterList: {
      chip: {
        display: 'none'
      }
    },
    MUIDataTableHead : {
      responsiveStacked: {
        [theme.breakpoints.down('md')]: {
          display: 'table-header-group',
        },
      }
    },
    MuiTableCell: {
      head: {
        [theme.breakpoints.down('md')]: {
          display: 'none',
        },
      },
    },
    MUIDataTableSelectCell: {
      root: {
        [theme.breakpoints.down('md')]: {
          display: 'table-cell',
        },
      },
    },
    MUIDataTableToolbar: {
      filterPaper: {
        [theme.breakpoints.down('md')]: {
          width: '75%',
          maxWidth: '90%',
        },
        [theme.breakpoints.down('sm')]: {
          width: '90%',
        },
      },
    },
  }
}));
...
        <StyledEngineProvider injectFirst>
          <ThemeProvider theme={tableTheme()}>
            <MUIDataTable
              title={"Table Title"}
              data={data}
              columns={columns}
              options={options}
            />
          </ThemeProvider>
        </StyledEngineProvider>

I'm guessing one of these things fixed that error for me.

[KianoJ]

It's working but some of my CSS are broken now...
Will MUI-Datatables update their project so as not to have to go through this process anymore?

[mattshoaf]

I ran into some of that too, there were several breaking changes around styles with the update to Material 5 https://mui.com/guides/migration-v4/#handling-breaking-changes

The adaptV4Theme() and <StyledEngineProvider injectFirst> wrappers took care of most of them for me, but I'm still going through my app and making adjustments. I didn't notice any of datatables default styles breaking, but I've had to make updates to my custom styles and overrides.

So I think the short answer is no, you'll have to update your app for MUI5 since those breaking changes are coming from Material UI and not datatables.

[KianoJ]

Maybe if I only wrap Mui-Datatable components it will not break my style elswere...
My style is only CSS that worked with both MUI 4 and 5 it's only MUI-DataTables that make error...

[daggmano]

Having the same issue, but I don't have the MUI experience to be able to track much down. (Compared to Bootstrap, MUI feels a little magical-incantationy - although it looks nice!). Unfortunately there doesn't seem to be a decent alternative to MUI DataTables, so I guess I'll have to wait for more to come to light here...

[KianoJ]

@daggmano imo the only decent alternative is the paid version of MUI datagrid
For now I wrap every MUIDataTable like this

const theme = useTheme();
return (
   <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <MUIDataTable
          title={title}
          data={data}
          columns={columns}
          options={options}
        />
      </ThemeProvider>
   </StyledEngineProvider>
);

[daggmano]

@MGMehdi Thanks. I tried that, but still the same error. I guess I'll wait for the next update, assuming this issue gets some developer love...

[KianoJ]

@daggmano Can you show me your code ? I can try to find why it's not working

[raksrivastava]

Same error

Server Error
TypeError: Cannot read property 'down' of undefined

This error happened while generating the page. Any console logs will be displayed in the terminal window.