How do I remove the "Download as CSV" and "Print" when click the "Export" button using Material-UI DataGridPro.
CODESANDBOX: CLICK HERE
<GridToolbarContainer
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
width: "100%",
py: 1.5,
px: 0.75,
".MuiDataGrid-columnSeparator": {
position: "static"
}
}}
>
<Stack direction="row">
<GridToolbarExport
onClick={() => {
alert("hello");
}}
/>
<GridColumnHeaderSeparator
height={16}
resizable={false}
resizing={false}
/>
<GridToolbarFilterButton />
</Stack>
</GridToolbarContainer>
emm...Refer to the link disabled-format, maybe the code below will be of help.
<GridToolbarExport
onClick={() => {
alert("hello");
}}
printOptions={{ disableToolbarButton: true }}
/>
Related
I appreciate if anyone can give a solution to add space between or space evenly between the two IconButton inside the ImageListItem in Material UI. The code uses Material UI library inside Reactjs
<ImageListItem
key={item?.id}
cols={item.cols || 1}
rows={item.rows || 1}
>
<img
{...srcSetStyle(item.url, 121, item.rows, item.cols)}
alt={item.url}
loading="lazy"
/>
<ImageListItemBar
sx={{
background: "transparent",
top: "5%",
}}
position="top"
actionPosition="left"
actionIcon={
<>
<IconButton
sx={{ color: "red" }}
>
{item.isFavorite ? (
<FavoriteIcon className="favoriteIcon" />
) : (
<FavoriteBorderIcon
className="favoriteIcon"
/>
)}
</IconButton>
<IconButton
className="addIcon"
sx={{
color: "red",
}}
>
<AddCircleOutlineIcon />
</IconButton>
</>
}
/>
</ImageListItem>
You need to change flex-grow attributes of both MuiImageListItemBar-titleWrap and MuiImageListItemBar-actionIcon classes of ImageListItemBar like this:
sx={{
background: "transparent",
top: "5%",
"& .MuiImageListItemBar-titleWrap": {
flexGrow: 0
},
"& .MuiImageListItemBar-actionIcon": {
flexGrow: 1
}
}}
After that, you need to wrap your icons with a div and add desired style like this:
<div
style={{
display: "flex",
justifyContent: "space-between"
}}
>
... (action button icons here)
</div>
You can take a look at this sandbox for a live working example of this solution.
I want to implement flex system from material-ui using the Stack component Im faced with a issue. The other half of my screen is displaying another component or blank space and I dont know how to get rid of it.
I'm using the Stack component from material-ui and the normal html iframe tag to build a code editor. Any Idea how I can fix this using Stack?
Screenshot of UI:
Here is my code:
index.js
<Stack sx={{ bgcolor: 'white', pt: 1 }}>
<TabContext value={value} >
<Box sx={{ borderBottom: 1, borderColor: 'divider', bgcolor: 'white' }}>
<TabList onChange={handleChange} >
<Tab label="HTML" value="1" />
<Tab label="CSS" value="2" />
<Tab label="JS" value="3" />
<Tab label="Output" value="4" sx={{ display: { xs: 'block', md: 'none' }, mt: 1 }} />
</TabList>
</Box>
{value === '4' ?
<Stack sx={{ height: 'calc(100vh - 201px)' }}>
<iframe title="result"
sandbox="allow-scripts"
frameBorder="0"
width="100%"
srcDoc={iframeDisplay}
/>
</Stack>
:
<Stack direction="row" sx={{ width: '100%', height: '100%', position: 'relative'}}>
<Stack sx={{ width: { xs: '100%', md: '50%' }, bgcolor: "white" }}>
<TabPanel value={value} sx={{ p: 0 }}>
<CodeMirror
value={codeEditor.value}
height={CODE_EDITOR_PROPS.height}
theme={CODE_EDITOR_PROPS.theme}
extensions={codeEditor.extensions}
onChange={onChange}
/>
</TabPanel>
</Stack>
<Box sx={{ display: { xs: 'none', md:'flex' }, height: 'calc(100vh - 201px)', width: 'calc(50% - 1024px)'}}>
<iframe
title="result"
frameBorder="0"
height="calc(100vh - 201px)"
srcDoc={iframeDisplay}
/>
</Box>
</Stack>}
</TabContext>
</Stack>
I'm new to react and material UI and I've been trying to design my navbar so that my logo, search bar and drawer are in the center. I was able to get help earlier to get space between the components and have my search bar centered, but now i'm struggling to have my logo and drawer to be in the center while observing a minimum width from my searchbar.
I already tried wrapping them into a container with a specified width but they lose their alignment in the center.
here's my code:
const Search = styled('div')(({ theme }) => ({
position: 'relative',
borderRadius: 30,
backgroundColor: alpha(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: alpha(theme.palette.common.white, 0.25),
},
// marginLeft: 10,
width: 'auto'
}));
const SearchIconWrapper = styled('div')(({ theme }) => ({
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}));
const StyledInputBase = styled(InputBase)(({ theme }) => ({
color: 'inherit',
'& .MuiInputBase-input': {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create('width'),
width: 'auto',
},
}));
export default function SearchAppBar({ search, setSearch }) {
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="fixed" sx={{ backgroundColor: "#55597d" }}>
<Toolbar sx={{ justifyContent: "space-between" }}>
<Stack direction="row" alignItems="center">
<img
style={{ marginRight: "10px" }}
src={logo}
alt="logo"
className="logotext"
width="38"
height="38"
/>
</Stack>
<Search>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
<StyledInputBase
sx={{ width: "auto" }}
value={search}
onChange={(e) => {
setSearch(e.target.value);
}}
placeholder="Search All Games…"
inputProps={{ "aria-label": "search" }}
/>
</Search>
{/*</div>*/}
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="open drawer"
sx={{ mr: 0, ml: 0 }}
>
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
</Box>
);
}
I have this project and it is in order to monitor employees and I have a component which is "create workspace"
and I have added elements to this interface and I want this interface to be responsive, how can I do that?
And what are the ways in which you can make this page responsive?
Within this component, I have added a group of elements.
const useStyles = makeStyles({
resize:{
fontSize:24
}
});
const Settings: FC = () => {
const classes = useStyles()
return (
<Card style={{backgroundColor: 'transparent' , maxWidth: 1500 , minWidth: 500}}>
<CardContent>
<Box
sx={{
maxWidth: 1500,
// minWidth: 300
}}
>
<Box
sx={{
display: 'flex',
justifyContent: 'start'
}}
>
<Avatar style={{width: '5rem', height: '5rem'}} alt="Remy Sharp"
src="/static/images/avatar/1.jpg"/>
<TextField
fullWidth
name="workspaceName"
placeholder="Workspace Name"
variant="standard"
style={{
paddingLeft: '1.4rem',
transition: ' all .2s cubic-bezier(.785,.135,.15,.86) 0s',
display: 'flex',
alignItems: 'center',
flexGrow: 1,
position: 'relative',
color: '#828588',
}}
InputProps={{
classes: {
input: classes.resize,
},
}}
defaultValue="nameeeee"
/>
</Box>
</Box>
<CardActions
style={{ paddingTop: '10rem'}}
>
<Button style={{
minWidth: '10rem',
fontSize: '1.5rem',
height: '44px',
fontWeight: 400,
textShadow: 'none',
color: '#fd71af',
border: 0,
background: 'none'
}}>Delete Workspace</Button>
<Button
color="primary"
component={RouterLink}
to="/dashboard/workspaces/1"
variant="contained"
style={{
minWidth: '13rem',
minHeight: '4.3rem',
fontSize: '1.4rem',
backgroundColor: '#7b68ee',
borderRadius: 6,
marginLeft:'60rem'
}}
>
Saved
</Button>
</CardActions>
</CardContent>
</Card>
);
}
export default Settings;
Use material UI grids where ever you want to make the layout responsive. Check its documentation here : Material UI Grid
You can add different layouts for different screen sizes. You should also wrap your component in the Container component provided by Material-UI, It makes your web page fluid.
Hope this answers your question.
I'm new to material UI framework, i want to stretch the grid accordingly displayed in the content. I couldn't able to do that. Can anyone help me in this?
<Card>
<CardHeader
avatar={<Avatar aria-label="recipe">S</Avatar>}
title={
<>
<InputBase placeholder="Search Google Maps" margin="normal" />
<IconButton type="submit" aria-label="search">
<SearchIcon />
</IconButton>
</>
}
/>
<Divider />
<CardContent
style={{ overflow: "scroll" }}
className={classes.contentHeight}
id="chatList"
>
<div>
<Message isSender content="Hello" />
{this.state.data.map(item => {
if (item.isSender) {
return (
<Message isSender name="Sanjana" content={item.content} />
);
}
return <Message name="Sanjana" content={item.content} />;
})}
</div>
</CardContent>
<Divider />
<CardActions>
<Paper className={classes.contentPaper}>
<Input
margin="dense"
className={classes.input}
placeholder="Enter a Message"
disableUnderline
/>
</Paper>
</CardActions>
</Card>
Can anyone help me in this query?
Thanks in advance!
Remove width: 100
<Card
style={{
backgroundColor: "#eee",
float: isSender ? "right" : "left",
padding: 16,
minHeight: 40,
width: 100,
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
{content}
</Card>
should be
<Card
style={{
backgroundColor: "#eee",
float: isSender ? "right" : "left",
padding: 16,
minHeight: 40,
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
{content}
</Card>
because the width: 100 gives it a width of 100px.
To make the content to stretch full width, you can use width: "fit-content" and assign your width value of 100 to minWidth: 100.
So your card will look like,
<Card
style={{
backgroundColor: "#eee",
float: isSender ? "right" : "left",
padding: 16,
diaplay: "block",
minHeight: 40,
width: "fit-content",
minWidth: 100,
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
To make the content left align inside card, you can assign style to Grid like,
<Grid style={{ paddingBottom: 8, textAlign: "left" }} item xs={12}>
<span>{name}</span>
</Grid>
Forked sandbox