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>