I am facing an issue with the responsiveness of my MUIDatatables. The table is not adjusting properly to different window sizes. I specifically want each row in the table to be displayed on a single line and utilize horizontal scrolling.
I attempted to place the table inside a Material UI Grid component and Grid Component, but it doesn't seem to be working as expected. It's possible that I might not have configured it correctly.
This is where all my components are located
<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>
// Routes for different components
</Switch>
</div>
</main>
</div>
</div>
</ThemeProvider>
</div>
Table setup
<Grid container direction='row'>
<Grid item>
<MUIDataTable data={data123} columns={columns123} options={options}/>
</Grid>
</Grid>