Material-UI : tab not responsive with a datatable inside - javascript

I use the Simple Tabs from Material-UI and I have one Tab how contain a Datatable (React-Data_Table) and this tab is not responsive like other when the table is full
Empty
Full
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>
I don't know how to fix this except maybe make a CSS to change width with size screen
Thanks for the help

If the child element is exceeding it's parent's size(container element) I would recommend to try using max-width to ensure the width doesn't pass a certain limit.

Related

getting typescript error in react + mui while creating tabs?

I am creating custom hook of accordion component . I am getting below error
export default const Tabs: OverridableComponent<TabsTypeMap<{}, ExtendButtonBase<ButtonBaseTypeMap<{}, "button">>>>
here is my code
https://codesandbox.io/s/epic-easley-ek3ev5?file=/src/App.tsx
export default function BasicTabs() {
const { register, value } = useTabs();
return (
<Box sx={{ width: "100%" }}>
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<Tabs {...register()} aria-label="basic tabs example">
<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
</Tabs>
</Box>
<TabPanel value={value} index={0}>
Item One
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Three
</TabPanel>
</Box>
);
any suggestion
In your useTabs you should change change React.ChangeEvent to React.SyntheticEvent as the signature of onChange is function(event: React.SyntheticEvent, value: any) => void in <Tabs /> : https://mui.com/material-ui/api/tabs/

Material ui scrollable tabs with position fixed

I was using material-ui scrollable tabs (https://mui.com/material-ui/react-tabs/#scrollable-tabs).
like this code..
<Tabs
value={value}
onChange={handleChange}
variant="scrollable"
scrollButtons="auto"
aria-label="scrollable auto tabs example"
style={{ position: 'fixed', backgroundColor: 'white' }} // I add this line!
>
<Tab label="전체" component={Link} to="/main"></Tab>
<Tab label="치킨" component={Link} to="/main/chicken"></Tab>
<Tab label="피자/양식" component={Link} to="/main/pizza"></Tab>
<Tab label="중식" component={Link} to="/main/chinese" />
<Tab label="한식" component={Link} to="/main/korean" />
<Tab label="일식/돈까스" component={Link} to="/main/japanese" />
<Tab label="족발/보쌈" component={Link} to="/main/pork" />
</Tabs>
In the meantime, I want to fix header and scrollable tab when I scroll through the posts like below picture.
so I add style={{position: 'fixed'}}code to header and scrollable tab.
As a result, Fixing header and scrollable tabs works fine.
But in scrollable tab, tab scrolling doesn't work as well as it used to be.
How can I handle this?? Please help me ....
You should add style={{position: 'fixed'}} in the parent element of Tabs :
<Box sx={{ maxWidth: 320, position: 'fixed', bgcolor: 'background.paper' }}>
<Tabs
value={value}
onChange={handleChange}
variant="scrollable"
scrollButtons="auto"
aria-label="scrollable auto tabs example"
>
<Tab label="전체" component={Link} to="/main"></Tab>
</Tabs>
</Box>
Demo:
https://codesandbox.io/s/labtabs-material-demo-forked-bx030i?file=/demo.tsx

Chakra UI, Tabs onChange method throws Maximum update depth exceeded on state change

I have the following code,
React throws Maximum update depth exceeded error, whenever I change the change the
index, It is somehow forming an infinite loop,
and the onChange method is being called on render, how can I fix it?
const ChecklistNavbarTabs = () => {
const [tabIndex, setTabIndex] = useState(0);
return (
<Tabs
variant='unstyled'
alignItems='center'
width='full'
bgColor='header.100'
height='full'
onChange={(index:number)=>{setTabIndex(index)}}
>
<TabList color='blackAlpha.600' justifyContent='space-between' m='3'>
<Flex
alignContent='space-between'
borderRadius='4'
justifyContent='space-between'
border='1px solid'
borderColor='blackAlpha.500'
>
<Flex justifyContent='space-between'>
<Flex>
<Tab
bgColor='gray.100'
borderColor='blackAlpha.500'
border='1px solid'
>
<Text>Header Fields</Text>
</Tab>
</Flex>
<Flex>
<Tab
bgColor='gray.100'
borderColor='blackAlpha.500'
border='1px solid'
>
<Text>Checkpoint</Text>
</Tab>
</Flex>
<Flex>
<Tab
bgColor='gray.100'
borderColor='blackAlpha.500'
border='1px solid'
>
<Text>Checklist Item</Text>
</Tab>
</Flex>
<Flex>
<Tab
bgColor='gray.100'
borderColor='blackAlpha.500'
border='1px solid'
>
<Text>Footer Field</Text>
</Tab>
</Flex>
</Flex>
</Flex>
<Flex justifyContent='flex-end' flex='1'>
<AddHeaderFieldButton />
</Flex>
</TabList>
<Flex>
<TabPanels>
<TabPanel>
<ChecklistHeaderFieldTable table={navbarData} />
</TabPanel>
<TabPanel>
<CreateCheckpointTable table={CreateCheckPointData} />
</TabPanel>
<TabPanel>
{/* <CreateChecklistItemTable table={AddChecklistItemData} /> */}
</TabPanel>
<TabPanel>
{/* <ChecklistFooterTable table={AddFooterTableData} /> */}
</TabPanel>
</TabPanels>
</Flex>
</Tabs>
);
};
export default ChecklistNavbarTabs;
I have tried, useMemo and useCallback as well, to memoize the results and stop re-render though I don't know if that the right way.
Please help me solve this error.
The documentation says the following:
You can render any element within Tabs, but TabList should only have Tab as children, and TabPanels should have TabPanel as children.
Tabs expects TabList and TabPanels as children. The order doesn't matter, you can have TabList at the top, at the bottom, or both.
I believe nesting Tab inside of multiple Flex components is the cause of the onChange infinite loop issue. Tab should be a direct child of TabList. You'd likely also need to remove <AddHeaderFieldButton /> or place it inside of a Tab component. Also TabPanels should not be wrapped in a Flex component.
The cause of the problem was that the tab panels had react-table tables as children, and there was an issue that I did not use useMemo while declaring table headers.
simply then fixed it via useMemo

Why react route is not working in material ui?

I am creating tab and adding routing inside the first tab. But the desired page is not shown after a click on the link. Although after refreshing the page the corresponding page will display on screen. Anyone please help me to solve this where I'm doing wrong im using material UI for this
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<Typography
component="div"
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
<Box p={3}>{children}</Box>
</Typography>
);
}
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired,
};
function a11yProps(index) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
},
}));
export default function SimpleTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<AppBar position="static">
<Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
<Router>
<ul className="navbar-nav mr-auto" >
<li><Link to={'/Text'} className="nav-link"><i class="fas fa-text-height"></i> Text </Link></li>
</ul>
<div>
</div>
</Router>
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Three
</TabPanel>
<Router>
<Switch>
<Route exact path='/Text' component={Text} />
</Switch>
</Router>
</div>
);
}
so please tell me where should i change or what is wrong with the code.
Why are you declaring your Router component twice? There should be only one Router component wrapping whole application (not talking about special cases when 2+ are needed) which is the reason your Link and your Route are not in sync. Try something like this:
return (
<Router>
<div className={classes.root}>
<AppBar position="static">
<Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
<ul className="navbar-nav mr-auto" >
<li><Link to={'/Text'} className="nav-link"><i class="fas fa-text-height"></i> Text </Link></li>
</ul>
<div>
</div>
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Three
</TabPanel>
<Switch>
<Route exact path='/Text' component={Text} />
</Switch>
</div>
</Router>
);

Align Grid nicely

I'm breaking my head over this. I'm using a Grid container, which contains two grids. One with a textfield , and one with a Checkbox . The grids refuses to align correctly.
<Grid container>
<Grid item sm={2}>
<TextField
id="filter"
label={labels.filterHelperText}
value={this.props.brokersListFilter}
onChange={this.onFilterChange}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<FilterListIcon />
</InputAdornment>
)
}}
/>
</Grid>
<Grid item sm={1}>
<FormControlLabel
className={this.props.classes.checkbox}
control={
<Checkbox
checked={this.props.activeAgentsOnly}
onChange={this.props.setActiveAgentsOnly}
color="primary"
/>
}
label={labels.isActive}
/>
</Grid>
</Grid>
With this code, the spacing are too large... If I change the first inner grid to sm={1} , then both grid overlap each other(how is it even possible if they're on different grids ?) I need to somehow make the gap between those two grids smaller .. How can I do that?
Over lapping:
Not over lapping:
Please update grid items like
<Grid item sm={2}>
to
<Grid item sm={6}>
<Grid item sm={6}>
Should equal 12. 8+4 or 6+6 or so on.....

Categories