I implemented the Simple Tabs feature from Material-UI with a Tab containing a Datatable using React-Data_Table. However, I noticed that this particular tab is not responsive like the others when the table is full.
Here's a snippet of the code:
<Grid item xs={12}>
<Paper className={classes.paper}>
<AppBar position="static" className={classes.appBar}>
<Tabs value={value} onChange={handleChange} classes={{ indicator: classes.indicator }} variant="fullWidth">
<Tab label="Tableau" {...a11yProps(0)} />
<Tab label="Graphique" {...a11yProps(1)} />
<Tab label="Carte" {...a11yProps(2)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
<Table sections={props.sections}/>
</TabPanel>
<TabPanel value={value} index={1}>
<Graph />
</TabPanel>
<TabPanel value={value} index={2}>
<AppMap />
</TabPanel>
</Paper>
</Grid>
This issue seems to be related to CSS and changing the width based on screen size might resolve it
Any suggestions on how to fix this would be greatly appreciated