Show action only on row hover in material-UI v5 data grid

Question

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

Answer 1

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.

Answer 2

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: