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

Question

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

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

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

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

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

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

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

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

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

<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