mobile responsive: 'stacked' view, shows 3 columns instead of 2 and breaks display

[omarkhaled11]

Expected Behavior

The mobile view with responsive:'stacked' should render 2 columns with KEY - VALUE each taking 50% of the screen Like this screenshot https://static.brantu.com/images/content/medium/LRPZ8Vq0r-3ba5f2ddd95e5d34.png

Current Behavior

The table displays 3 columns, with this shape KEY VALUE KEY VALUE KEY VALUE and so on..

like this screenshot https://static.brantu.com/images/content/medium/3qvvul6EG-d15ab1a2d934bd36.png

Steps to Reproduce (for bugs)

1. display any data while passing responsive:'stacked' in options, or not, it falls back to this as default anyway.

Your Environment

Tech	Version
@material-ui/core	^3.9.2
MUI-datatables	^2.0.0-beta.56
React	^16.7.0
browser	Chrome

[jimdis]

I got the same problem. Responsiveness stacked with two kolumns of key-value-pairs works down until 482px width, at which point it breaks and displays three columns at lower widths. Tested both in Chrome and Safari in responsive view.

[davidhenley]

+1

[gregnb]

Marked as a bug. If anyone can pitch in on this bug would be appreciated. I'll try to get it to when I can

[omarkhaled11]

I would like to give it a try and fix it, do you have some sort of a contribution guide that can help me out?

[gabrielliwerant]

@omarkhaled11 Your help would be greatly appreciated. What I would recommend is forking the project, creating a new branch off of latest master, and put your fix in there. Then you can open a PR against upstream master. I don't think there's an official contributor guide at this point, so try to follow existing conventions where possible. Adding tests around your fix is always appreciated as well!

[BernardA]

Same issue. See below screenshots from Firefox devtools, showing a IPhone 5/SE:

It works fine on landscape and mangles it on portrait, ie, 320px. ( email masked on the table for privacy reasons)

[emaciasr]

Any workaround on this? I just installed it and facing the same behavior shared by @BernardA

[emaciasr]

Hi again, in my case, the issue got resolved by removing the following in src/index.css

*, *:before, *:after { box-sizing: inherit; } */

Now, it looks great

[geohub2017]

I fixed it by applying style to MuiDataTable parent element. <div style={{ boxSizing: 'content-box' }} > < MUIDataTable data={data} columns={columns} options={options} /> </div >

[SomnathKadam]

fixed using stackedCommon of MUIDataTableBodyCell

createMuiTheme({
            overrides: {
createMuiTheme({
            overrides: {
                MUIDataTableBodyCell: {
                    stackedCommon: {
                        '@media (max-width:959.95px)': {
                            height: '100%'
                        }
                    }
                }
}
});

[kannankvsp]

This works for me

const getMuiTheme =createTheme({
  components: {
    MUIDataTableBodyCell: {
      styleOverrides:{
        stackedHeader:{
          display:"none"
        }
      }}
    }
})

function App() {
  return (
      <ThemeProvider theme={getMuiTheme}>
        <MUIDataTable options={{TableBody:''}} columns={["name","type"]} data={[["govt","60"]] }/>
      </ThemeProvider>
  );
}``