How to make Material-UI Datatable responsive to window size
I am using MUIDatatables and the table is not responsive to the window screen. I want the table to always have one line per row, and use horizontal scroll.
I have tried putting the table inside a Material UI Grid component and Grid Component but that isn't working or I might not be configuring it correctly.
This is where I house all my components
<ThemeProvider theme={theme}>
<div className={classes.root}>
<CssBaseline />
<nav className={classes.drawer}>
<Hidden xsDown implementation="js">
<Navigator open={this.state.drawerOpen} PaperProps={{ style: { width: drawerWidth } }} />
</Hidden>
</nav>
<div className={classes.appContent}>
<Header onDrawerToggle={this.handleDrawerToggle} />
<main className={classes.mainContent}>
<div>
<Switch>
<Route exact path="/EditContracts/:contractId/sections/:section" component={EditSection} />
<Route exact path="/EditContracts/:contractId" component={EditContract} />
<Route exact path="/EditUsers/:userId" component={EditUser} />
<Route exact path="/EditEndpoints/:epId" component={EditEndpoint} />
<Route exact path="/EditTunnels/:tunnel_id" component={EditTunnel} />
<Route exact path="/EditContracts/:contractId/addSection" component={CreateSection} />
<Route exact path="/Contracts/List" component={Contracts} />
<Route exact path="/Contracts/Create" component={CreateContract} />
<Route exact path="/Tunnel_Profiles/Create" component={CreateTunnel} />
<Route exact path="/Contracts/Import" component={ImportContract} />
<Route exact path="/Users/List" component={Users} />
<Route exact path="/Tunnel_Profiles/List" component={TunnelProfiles} />
<Route exact path="/Users/Create" component={CreateUser} />
<Route exact path="/Endpoints/Create" component={CreateEndpoint} />
<Route exact path="/Endpoints/List" component={Endpoints} />
<Route exact path="/Community" component={PugCommunity} />
<Route exact path="/Connections" component={Connections} />
<Route exact path="/Dashboard" component={Dashboard} />
<Route exact path="/Alerts" component={Alerts} />
<Route exact path="/System_Setup/Organization" component={Organization} />
<Redirect exact from="/System_Setup" to="/System_Setup/Organization" />
<Redirect exact from="/Users" to="/Users/List" />
<Redirect exact from="/Tunnel_Profiles" to="/Tunnel_Profiles/List" />
<Redirect exact from="/Endpoints" to="/Endpoints/List" />
<Redirect exact from="/Contracts" to="/Contracts/List" />
</Switch>
</div>
</main>
</div>
</div>
</ThemeProvider>
</div>
How I have table set up
<Grid container direction='row'>
<Grid item>
<MUIDataTable data={data123} columns={columns123} options={options}/>
</Grid>
</Grid>