I'm using MUIv4 and built the following table component which show some actions on hover.
UI Before Hover
UI After Hover
Now I want to shift to MUI v5 Datagrid to replace this component. But could not find anything that could fulfill my design need i.e show actions on hover. Is there any way to do this on Datagrid component?
Link of MUI5 DataGrid with somehow desire result
Note: I want to show the action on one row at a time like in gmail
Just give me the code: https://codesandbox.io/s/datagridprodemo-material-demo-forked-63c9j?file=/demo.js:699-864
You can use renderCell with Chip like this:
renderCell: (params) => {
return (
<Chip variant="outlined" size="small" label={params.value} />
);
}
As you are requiring some GMail like interface try setting the icon property of Chip. Reference: https://github.com/mui-org/material-ui/blob/v5.3.0/docs/src/pages/components/chips/IconChips.js
And it looks something like this:
You could check this documentation about migration from v4 to v5 https://mui.com/components/data-grid/migration-v4/#removed-props.
There are some removed props related to hover event: onCellEnter, onCellLeave, onRowEnter, and onRowLeave. The developer said that they removed the props for better performance https://github.com/mui-org/material-ui-x/issues/3799.
You could also check this documentation https://mui.com/components/data-grid/components/#row for the implementation examples when the mouse cursor enters or leaves the row or this documentation https://mui.com/components/data-grid/components/#cell when the mouse cursor enters or leaves the cell.
Related
In a day view, how to change style of the event content.
I am able to make custom toolbar and change some styling for timeSlotWrapper but not able to take control of event content.
I have tried below code and achieved some customization using below code.
I have created a sandbox with all the code I have so far.
Currently I have this:
Expected -
I want to be able to show those colored bars with event content.
I tried searching in issues but could not find any code that can help me so far.
Could someone pls help point me to right direction?
Thank you.
You can provide a custom event layout and pass it into your components prop
<Calendar
components={{
event: CustomEvent
}}
...other props
/>
you can also use the eventPropGetter prop for adding in additional classnames or styles.
I am implementing the Autocomplete material ui widget in my webApp, but the drop down is rendering behind my edit panel. I can use my arrow keys to select options, but I can't see the pop up. If I remove either of the following css property {position: "fixed"} or {"z-index": "2000"} it works, but my edit panel will no longer look correct. So it seems that I need to be able to set the zindex of the drop down to 2001 or some thing, but i am unsure as to how or if this is the best solution.
Also I am trying to set the initial value of the dropdown box to "ACCU-SEAL 35-532 Bag Sealer" but get the following error:
Material-UI: the 'getOptionLabel' method of Autocomplete returned undefined instead of a string for "ACCU-SEAL 35-532 Bag Sealer".
so I tried to add the following to my Autocomplete:
getOptionSelected={(option, value) => option.label === value}
but I get the same error.
I have an example of my code up here:
https://codesandbox.io/s/material-demo-fv075?file=/formElementsEdit.jsx
You can use the disablePortal prop to make sure that the menu will be rendered under the current node:
<Autocomplete
....
disablePortal
....
/>
I'm new to reactjs and material UI.
I have struck in Materia UI autocomplete https://codesandbox.io/s/material-demo-47kfg (without popper or 1st one).
Here I want to disable some country value based on some condition.
like if country is albania i want to disable the albania. user should able to select the country and the popper should not close on the click event.
i have tried like this
<Paper disabled={option.children=='Albania'?true:false} {...options.containerProps} square>
{options.children}
</Paper>
I have tried but nothing is working.
can anyone resolve this
Is there a way to show why an option is disabled when I use react-select ?
Something like a disabledReason property in the option object ?
Assuming you want to show the reason alongside the disabled option in the menu, you can override how the option is rendered to render in a way that includes the reason.
How to do this exactly with the react-select API depends on if you are using V1 or V2 of react-select.
Example for V1: https://github.com/JedWatson/react-select/blob/v1.x/examples/src/components/CustomComponents.js
Docs for V2: https://react-select.com/props#replacing-components
One possible solution is
Use react's SyntheticEvent onMouseEnter on the react-selection component to check if mouse hover.
Check if the react-select components is disabled
If the react-select is disabled, show the a tooltip
In React, onMouseEnter or hover is not working as expected
https://reactjs.org/docs/events.html#mouse-events
tooltip div with ReactJS
New to React and MUI, and having a UX issue where when we have a popover (dropdown menu, or autoselect dropdown) we can still scroll the main body of the site. I see that its fixed in the new beta V1 for MUI, but using the current stable release, Ive been asked to see if we can hack it up to stop the scrolling - but I cant seem to target/catch anything when we have a popover appear.
Examples: Current MUI - http://www.material-ui.com/#/components/auto-complete
V1 Beta MUI - https://material-ui-next.com/demos/autocomplete/
So, if you were to input something in those examples and trigger the downdown/popover, youll see that in the current MUI, you can still scroll the
I was hoping someone may have had this issue and had a solution they'd like to share?
Thanks guys!
I had a similar problem and solve it using 'disablePortal' Autocomplete property:
You can take a look at 'disablePortal' definition in here:
https://material-ui.com/api/autocomplete/#props
disablePortal: Disable the portal behavior. The children stay within it's parent DOM hierarchy.
I also had to add some styles to get pop up get positioned relative to input component.
Here is some sort of example:
const useStyles = makeStyles({
popperDisablePortal: {
position: 'relative',
}
})
const classes = useStyles()
<Autocomplete
classes={classes}
disablePortal={true}
{...props}
/>
So you may have to:
set up disablePortal property
define associated popperDisablePortal style with 'relative' position
EDIT: actually this error should not happen as part of default MUI Autocomplete set up. In my case, the error was some conflicting CSS property that was generating this scroller bug. Not sure in your case, but to me it happens to be some overflow: auto property defined on page HTML tag (sometimes you can find it on body tag). Replace with overflow: 'visible' and scrolling error should be gone without even changing one line of autocomplete component definition.