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]

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.

[influentcoder]

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.

[hutber]

I'm also having this same issues. Changing tables at this point is less than desirable though :D

[gatz2]

no updates?

[prempro42]

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

Yes!! this would be so much better & helpful! I support the stack implementation for mobile view

[ravieway]

Still no update I guess

[gbdav2]

Any update?

[btechn01]

[kadirtereci]

any update?

[BugraTuncer]

Updates?

[kadirtereci]

Updates?

still no update...

[thepasterover]

Im really surprised this is not a feature in Material UI and it's problematic to see no further updates on this issue. Even Vuetify which is modelled after Material UI in its early versions has this feature. Hope Dev's notice this.

[joeflatt]

@JeffEmery @hatchli @LuanScudeler... Regarding horizontal scroll within a display: flex container, another workaround is to use min-width: 0 on your flex container instead of changing to display: block.

[NikhilChugh]

If someone is still facing this issue.. I did it this way
Wrap the material table with fieldset tag (hide its boundary using border: none)

<fieldset style={border: 'none'}>
 <MaterialTable
...otherData,
style={maxWidth: '90vw', overflow: 'auto'}.      // maxWidth adjust according to screen
 />
</fieldset>

Also give individual headerStyle: {width: ''} to each column header in 'px' to exceed total beyond screen size.

My material table version is "material-table": "^1.54.1",

[kadirtereci]

@NikhilChugh Can you share full code example? I tried your solution but it is not working for me

[NikhilChugh]

@kadirtereci check this code
`
import React, {useState} from 'react';
import MaterialTable from 'material-table';

function Editable() {

const [columns, setColumns] = useState([
{ title: 'Name', field: 'name', headerStyle: {width: '500px'} },
{ title: 'Surname', field: 'surname', initialEditValue: 'initial edit value', headerStyle: {width: '500px'} },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric', headerStyle: {width: '500px'} },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
headerStyle: {width: '500px'}
},
]);

const [data, setData] = useState([
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
]);

return (
<fieldset style={{padding: '0px', border: 'none'}}>
<MaterialTable
title="Editable Preview"
columns={columns}
style={{maxWidth: '97vw', overflow: 'scroll'}}
data={data}
editable={{
onRowAdd: newData =>
new Promise((resolve, reject) => {
setTimeout(() => {
setData([...data, newData]);

          resolve();
        }, 1000)
      }),
    onRowUpdate: (newData, oldData) =>
      new Promise((resolve, reject) => {
        setTimeout(() => {
          const dataUpdate = [...data];
          const index = oldData.tableData.id;
          dataUpdate[index] = newData;
          setData([...dataUpdate]);

          resolve();
        }, 1000)
      }),
    onRowDelete: oldData =>
      new Promise((resolve, reject) => {
        setTimeout(() => {
          const dataDelete = [...data];
          const index = oldData.tableData.id;
          dataDelete.splice(index, 1);
          setData([...dataDelete]);
          
          resolve()
        }, 1000)
      }),
  }}
/>
</fieldset>

)
}

export default Editable;

`

This will only make material table horizontally scrollable. Hope it helps

[hamid842]

I had the same issue, but did like this:
`import React from "react";
import MaterialTable from "material-table";
import "./App.css";
import {
ThemeProvider,
useTheme,
createTheme,
makeStyles,
} from "@material-ui/core/styles";
import { Grid, Typography } from "@material-ui/core";
import useMediaQuery from "@material-ui/core/useMediaQuery";

const useStyles = makeStyles((theme) => ({
titleContainer: {
[theme.breakpoints.up("sm")]: {
display: "none",
},
},
title: {
fontWeight: 700,
},
}));

const theme = createTheme();

function App() {
function useWidth() {
const theme = useTheme();
const keys = [...theme.breakpoints.keys].reverse();
return (
keys.reduce((output, key) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const matches = useMediaQuery(theme.breakpoints.up(key));
return !output && matches ? key : output;
}, null) || "xs"
);
}

const width = useWidth();
const classes = useStyles();
return (

<MaterialTable
title="Action Overriding Preview"
// style={classes.table}
columns={[
{
title: "Name",
field: "name",
align: "left",
render: (rowData) => (


Name:


{rowData.name}


),
cellStyle:
width === "xs"
? {
width: "100%",
display: "flex",
flexDirection: "column",
borderBottom: 0,
}
: {},
},
{
title: "Surname",
field: "surname",
align: "left",
render: (rowData) => (


Surname:


{rowData.surname}


),
cellStyle:
width === "xs"
? {
width: "100%",
display: "flex",
flexDirection: "column",
borderBottom: 0,
}
: {},
},
{
title: "Birth Year",
field: "birthYear",
type: "numeric",
align: "left",
render: (rowData) => (


Birth Date:


{rowData.birthYear}


),
cellStyle:
width === "xs"
? {
width: "100%",
display: "flex",
flexDirection: "column",
borderBottom: 0,
}
: {},
},
{
title: "Birth Place",
field: "birthCity",
lookup: { 34: "İstanbul", 63: "Şanlıurfa" },
align: "left",
render: (rowData) => (


Birth City:


{rowData.birthCity}


),
cellStyle:
width === "xs"
? {
width: "100%",
display: "flex",
flexDirection: "column",
borderBottomWidth: 2,
}
: {},
},
]}
data={[
{ name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
{
name: "Zerya Betül",
surname: "Baran",
birthYear: 2017,
birthCity: 34,
},
{
name: "Zerya Betül",
surname: "Baran",
birthYear: 2017,
birthCity: 34,
},
]}
options={{
emptyRowsWhenPaging: false,
search: false,
rowStyle:
width === "xs"
? {
width: "100%",
display: "flex",
flexDirection: "column",
}
: {},
headerStyle:
width === "xs"
? {
display: "none",
}
: {},
}}
actions={[
{
icon: "save",
tooltip: "Save User",
onClick: (event, rowData) => alert("You saved " + rowData.name),
},
]}
/>

);
}

export default App;
`

if you want to make component smaller you can create reusable component for each column "render" and even make this MaterialTable component reusable.

[stale]

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.

[archfz]

Bump.

[nuggetsnetwork]

Cant believe there is no formal solution to this since.

[abdennour]

i cannot believe. But this is the reality : (

[kfw9257]

Any update on this issue?

[archfz]

Give a try on https://github.com/archfz/vh-sticky-table-header . This allows for both sticky header and also horizontal scrolling on mobile (it doesn't use display sticky, to support on parents different displays and overflows).

[fappaz]

Alternatively, material-table could have the built-in capability to render each row as a different component on shorter widths, like bootstrap-table:

I understand some existing features (e.g. grouping?) might be challenging to implement with this approach, so a good idea would be to empower the developers to render their own responsive row, as long as the component has access to the row data and table state:

<MaterialTable
  title="Users"
  data={users}
  columns={[
    { title: "Name", field: "name" },
    { title: "Email", field: "email" },
  ]}
  components={{
    ResponsiveRow: ({ rowData, state }) => <UserCard user={rowData}  />
  }}
/>

What are your thoughts?

[stale]

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.

[MohammedSaberMohammed]

For Any one having this issue just use the following

    const tableStyle = {
         overflow: 'auto' // scroll
     };

   <div style={{ display: 'grid' }}> // ===> grid
      <MaterialTable
         style={tableStyle}
       />
  </div>