自定义编辑和删除行上的组件 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 组件之上

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

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

我还尝试更改DataGrid组件的列标题（变为1000）、行（变为10）和分页容器（变为1000）的zIndex属性也更改了zIndex Popper 组件的 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
  }
}}

1. 添加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;
  }
}

1. 固定actions 列并更改DataGrid 样式

<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