自定义编辑和删除行上的组件 DataGrid MUI v5 组件悬停

Question

I'm using Material UI or MUI v5 components for the UI library in my React Js app.

I'm creating a custom edit and delete row inside the DataGrid / DataGridPro component.

The specification is to show edit and delete icons for the hovered row but not by adding a new column (not adding an action column). I found the example for a private dashboard here.

So if the user decreases the width of the browser, the edit and delete icons wouldn't be hidden instead it would hide the row as seen in the image below.

I made it here https://codesandbox.io/s/learn-mui-data-grid-hover-row-367vh?file=/demo.js but I found some drawbacks below:

1. The Popper component is rendered on top of the DataGrid component

When our mouse cursor hovered the row that was not fully shown, the Popper component was shown like these images below.

I've tried to add the disablePortal={true} prop to the Popper component but it would make the Popper component rendered outside the row like this image below.

I also have tried to change the zIndex prop for the column header (became 1000), the row (became 10), and the pagination container (became 1000) of the DataGrid component also changed the zIndex prop of the Popper component (became 100) but still the Popper component was rendered on top of the DataGrid component like this image below.

Question 1: What should I do to make the Popper component rendered on the top of the row but still inside the DataGrid component like this image below?

2. The Popper component was not sticking to the DataGrid component

If I add a few new columns, the Popper component was sticking on the end of the row like this image below. This was the condition I want.

If we scroll our mouse to the start of the row, the Popper component was not sticking to the end of the row like this image below. This was not the condition I want.

Question 2: What should I do to make the Popper component stick to the end of the row regardless of scrolling horizontally our mouse like this image below?

Here is the demo https://codesandbox.io/s/learn-mui-data-grid-hover-row-367vh?file=/Demo2.jsx

Or is there any better way to achieve this case?

Answer 1

Finally, I could make it after learning about these features:

1. column pinning feature https://mui.com/components/data-grid/columns/#column-pinning to create the edit and delete icons container
2. componentsProps https://mui.com/components/data-grid/components/#row to control which row is hovered

Here are the steps:

1. use componentsProps to control which row is hovered

componentsProps={{
  row: {
    onMouseEnter: onMouseEnterRow,
    onMouseLeave: onMouseLeaveRow
  }
}}

2. add actions column and only show the edit and delete icons when the row is hovered

{
  field: "actions",
  headerName: "",
  width: 120,
  sortable: false,
  disableColumnMenu: true,
  renderCell: (params) => {
    if (hoveredRow === params.id) {
      return (
        <Box
          sx={{
            backgroundColor: "whitesmoke",
            width: "100%",
            height: "100%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <IconButton onClick={() => console.log(params.id)}>
            <EditIcon />
          </IconButton>
          <IconButton onClick={() => console.log(params.id)}>
            <DeleteIcon />
          </IconButton>
        </Box>
      );
    } else return null;
  }
}

3. pin the actions column and change the DataGrid styles

<DataGridPro
  // some code here ...
  initialState={{ pinnedColumns: { right: ["actions"] } }}
  sx={{
    "& .MuiDataGrid-iconSeparator": {
      display: "none"
    },
    "& .MuiDataGrid-pinnedColumnHeaders": {
      boxShadow: "none",
      backgroundColor: "transparent"
    },
    "& .MuiDataGrid-pinnedColumns": {
      boxShadow: "none",
      backgroundColor: "transparent",
      "& .MuiDataGrid-cell": {
        padding: 0
      }
    },
    "& .MuiDataGrid-row": {
      cursor: "pointer",
      "&:hover": {
        backgroundColor: "whitesmoke"
      },
      "&:first-child": {
        borderTop: "1px solid rgba(224, 224, 224, 1)"
      }
    },
    "& .MuiDataGrid-cell:focus": {
      outline: "none"
    },
    "& .MuiDataGrid-cell:focus-within": {
      outline: "none"
    }
  }}
/>

Here is the demo https://codesandbox.io/s/learn-mui-data-grid-column-pinning-gzgn0?file=/demo.js

Answer 2

All you really need to do is to adjust the translateX value to position it inside the table.

Adjust Paper component's translateX value to -270px :

<Paper sx={{ transform: "translateX(-270px)", zIndex: 100 }} style={myStyle}>
  <Button onClick={()=> console.log("edit: ", value.id)}>
    Edit
  </Button>
  <Button onClick={()=> console.log("delete: ", value.id)}>
    Delete
  </Button>
</Paper>

And add this style(Optional):

const myStyle = {
  background: '#F5F5F5',
  border: 'none',
  boxShadow: 'none'
}

Like so: