[Bug] 容器Group 问题

[xiaoshengwpp]

Version

1.15.0

Link to Minimal Reproduction

Steps to Reproduce

reacttable 使用Group 容器遇到的问题
<Group
attribute={{
width,
height,
display: 'flex',
alignItems: 'center',
//...
//...
}}
>

    <Group
      attribute={{
        width: 10,
        height,
        //
        react: {
          pointerEvents: true,
          container: table.bodyDomContainer,
          element: render(dataValue, record),//此处 在固定列中 展示不出来  不配置固定咧的情况下正常
        },
      }}
    />
    {/* ... */}
  //其它图元内容
  </Group>

使用Group 来布局的单元格的时候 Group内 在放一个Group图元 用来展示 dom 组件的时候 如果这一列 设置了固定列 那么自定义的 dom 会展示不出来；
如果注释掉 container: table.bodyDomContainer,这行 可以展示出来 ，但是自定义的 dom 组件 zindex 会高于 其它列 产生遮挡
1.可能需要解决 Group 包裹的Group 自定义 dom元素 在固定列上的展示问题
2.或者给出 调整 zindex 层级的 api 不遮挡内容

Current Behavior

Expected Behavior

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[xiaoshengwpp]

@Rui-Sun 1.15.0 版本支持么 设置了下 没有生效

[Rui-Sun]

仔细看了一下，之前的回答有问题，container的配置应该只需要body和header两中，会自动调整，我试了一下body在frozen的时候是正常的，能提供一下复现的环境吗？

[xiaoshengwpp]

@Rui-Sun 复现飞书发您了

[Rui-Sun]

@Rui-Sun 复现飞书发您了

请问这个问题还存在吗？我没能在飞书上找到相关的复现的信息，如果还存在的话麻烦再发我一下

[xiaoshengwpp]

@Rui-Sun 代码块
// import * as ReactVTable from '@visactor/react-vtable';
const { useCallback, useRef, useState } = React;
const { ListTable, ListColumn, Group } = ReactVTable;
const {
Avatar,
Comment,
Card,
Popover,
Space,
Button,
Popconfirm,
Message,
Notification
} = ArcoDesign;
const { IconHeart, IconMessage, IconStar, IconStarFill, IconHeartFill } = ArcoDesignIcon;
const CommentComponent = (props) => {
const { table, row, col, rect, dataValue } = props;
if (!table || row === undefined || col === undefined) {
return null;
}
const { height, width } = rect || table.getCellRect(col, row);
const record = table.getRecordByCell(col, row);
return (
<Group /* 最外层的这个用来布局 */
attribute={{
width,
height,
// react: {
// pointerEvents: true,
// penetrateEventList: ['wheel'],
// container: table.bodyDomContainer, // table.headerDomContainer
// // anchorType: 'bottom-right',
// // element:
// }
}}
>
<Group
attribute={{
width,
height,
react: {
pointerEvents: true,
penetrateEventList: ['wheel'],
container: table.bodyDomContainer, // table.headerDomContainer
// anchorType: 'bottom-right',
element:
}
}}
/>

);
};
const CommentReactComponent = (props) => {
const { name } = props;
const [like, setLike] = useState();
const [star, setStar] = useState();
const actions = [
<button className="custom-comment-action" key="heart" onClick={() => setLike(!like)}>
{like ? <IconHeartFill style={{ color: '#f53f3f' }} /> : }
{83 + (like ? 1 : 0)}
,
<button className="custom-comment-action" key="star" onClick={() => setStar(!star)}>
{star ? <IconStarFill style={{ color: '#ffb400' }} /> : }
{3 + (star ? 1 : 0)}
,

Reply

];
return (
<Comment
actions={actions}
author={name}
avatar={
<Popover
title={name}
content={

Here is the description of this user.

}
>
{name.slice(0, 1)}

}
content={

Comment body content.

}
datetime="1 hour"
style={{ marginTop: 10, marginLeft: 10 }}
/>
);
};
const OperationComponent = (props) => {
const { table, row, col, rect, dataValue } = props;
if (!table || row === undefined || col === undefined) {
return null;
}
const { height, width } = rect || table.getCellRect(col, row);
const record = table.getRecordByCell(col, row);
return (
<Group
attribute={{
width,
height,
react: {
pointerEvents: true,
penetrateEventList: ['wheel'],
container: table.bodyDomContainer, // table.headerDomContainer
// anchorType: 'bottom-right',
element:
}
}}
>
);
};
const OperationReactComponent = () => {
return (
<Space size="small" style={{ marginLeft: 10, marginTop: 40 }}>
<Button
onClick={() =>
Notification.info({
title: 'Normal',
content: 'This is an error Notification!'
})
}
type="primary"
>
Info

<Popconfirm
focusLock
title="Confirm"
content="Are you sure you want to delete?"
onOk={() => {
Message.info({
content: 'ok'
});
}}
onCancel={() => {
Message.error({
content: 'cancel'
});
}}
>
Delete


);
};
function generateRandomString(length) {
let result = '';
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
for (let i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
}
function App() {
const records = [];
for (let i = 0; i < 50; i++) {
records.push({
id: i,
name: generateRandomString(8)
});
}
return (
<ListTable
records={records}
height={900}
defaultRowHeight={110}
onReady={table => {
// eslint-disable-next-line no-undef
// (window as any).tableInstance = table;
}}
ReactDOM={ReactDom}
frozenColCount={2}
>
<ListColumn field={'id'} title={'ID'} />
<ListColumn field={'name'} title={'Comment'} width={300}>
<CommentComponent role={'custom-layout'} />

<ListColumn field={''} title={'Operation'} width={160}>
<OperationComponent role={'custom-layout'} />


);
}
const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
root.render();
// release react instance, do not copy
window.customRelease = () => {
root.unmount();
};

复制到 https://visactor.io/vtable/demo-react/custom-layout/cell-custom-dom 内可复现问题