Material-table: Material Table is not responsive

[kkateli]

Material Table is not responsive. It only reduces the width of the table when shrinking a page. A lot of other table libraries create "stacked" table in mobile view (e.g. https://github.com/gregnb/mui-datatables). Is it possible to have this stacked table view in the near future? I reckon It would be nice to swap the table to Material UI list in mobile view.

Taken from:MUI datatables

[abhishekgupta92]

Any visibility on this whether this is going to be implemented in the library sooner or later?

[JeffEmery]

What to do here... I don't see this lib having it's own responsive solution. I mean what would it look like? It would depend on the very instance of the table that needs to be rendered on a small screen. User preferences would undoubtedly cause all kinds of issues.

The only reasonable solution I can see is to implement horizontal scroll at some min width similar to material-ui table.

I like @kkateli idea of using a material-ui list to display an alternate view. Probably can do this pretty easily, but with significant drop in usability. e.g. sorting. Search might not be too bad. And list can be virtualized with react window

Anyway I think rolling your own mobile display is the better solution, with horizontal scroll being a best solution for this library.

[JeffEmery]

Horizontal scroll is apparently the default behavior already. I'll have to see why it's not scrolling on my table.

[hatchli]

@JeffEmery Mine is not horizontal scrolling either. Did you figure out what was disabling it?

[LuanScudeler]

@JeffEmery @hatchli Mine was not scrolling because the table was under a display: flex way up in the DOM tree of my layout. For me, horizontal scrolling only worked under a display: block

I wonder if it's possible to still make it horizontal scrollable with display: flex, that would be good because I had to do some undesired chages to my page layout because of the display: block

[JeffEmery]

@hatchli I think I had the same issue as @LuanScudeler . Once I dismantled all the containers above the table, the horizontal scroll began working. I didn't narrow it down to display: flex like @LuanScudeler but I highly suspect that was the same issue.

[a-tonchev]

Is there any progress on this issue? horizontal scrolling is really ugly on mobile and I really like material-table and don't want to switch.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[guillaume-humbert]

Bump

[anmolmalik97]

any updates?
@mbrn any plans to implement this?

[JeremyEnglert]

What to do here... I don't see this lib having it's own responsive solution. I mean what would it look like? It would depend on the very instance of the table that needs to be rendered on a small screen. User preferences would undoubtedly cause all kinds of issues.

Check out mui-datatables. They handle responsiveness very well! Would love to see something similar implemented in this library.