Mui-datatables: 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%'
                        }
                    }
                }
}
});