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

Question

我在我的 React Js 应用程序中为 UI 库使用 Material UI 或MUI v5组件。

我正在DataGrid / DataGridPro组件内创建自定义编辑和删除行。

规范是显示悬停行的编辑和删除图标，但不是通过添加新列（不是添加操作列）。 我在这里找到了私人仪表板的示例。

因此，如果用户减小浏览器的宽度，则不会隐藏编辑和删除图标，而是会隐藏该行，如下图所示。

我在这里做了https://codesandbox.io/s/learn-mui-data-grid-hover-row-367vh?file=/demo.js但我发现以下一些缺点：

1、 Popper组件渲染在DataGrid组件之上

当我们的鼠标 cursor 悬停在未完全显示的行上时， Popper组件如下图所示。

我尝试将disablePortal={true}道具添加到 Popper 组件，但它会使Popper组件呈现在行之外，如下图所示。

我还尝试更改了header列（变为1000）、行（变为10）和DataGrid组件的分页容器（变为1000）的zIndex prop也更改了Popper组件的zIndex prop（变为100）但是Popper组件仍然呈现在DataGrid组件之上，如下图所示。

问题 1：我应该怎么做才能使Popper组件呈现在行的顶部但仍在DataGrid组件内，如下图所示？

2. Popper组件没有粘在DataGrid组件上

如果我添加一些新列， Popper组件就会像下图一样粘在行尾。 这就是我想要的条件。

如果我们将鼠标滚动到行首， Popper组件不会像下图那样粘在行尾。 这不是我想要的条件。

问题 2：我应该怎么做才能使 Popper 组件粘在行的末尾而不管我们的鼠标水平滚动如下图所示？

这是演示https://codesandbox.io/s/learn-mui-data-grid-hover-row-367vh?file=/Demo2.jsx

或者有没有更好的方法来实现这种情况？

Answer 1

最后，在了解了这些功能后，我可以做到：

1. 列固定功能https://mui.com/components/data-grid/columns/#column-pinning创建编辑和删除图标容器
2. componentsProps https://mui.com/components/data-grid/components/#row控制悬停哪一行

以下是步骤：

1. 使用componentsProps控制悬停的行

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

2. 添加actions列，仅在悬停该行时显示编辑和删除图标

{
  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. 固定actions列并更改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"
    }
  }}
/>

这是演示https://codesandbox.io/s/learn-mui-data-grid-column-pinning-gzgn0?file=/demo.js

Answer 2

您真正需要做的就是将translateX值调整为 position 它在表格内。

将 Paper 组件的translateX值调整为-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>

并添加此样式（可选）：

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

像这样：