[Table] 空状态占位符位置偏移

[DevQiao]

tdesign-react 版本

1.5.x

重现链接

No response

重现步骤

是否层级考虑欠缺？

期望结果

empty 提示应在可视区域居中，独立于数据 table items

实际结果

empty 状态位置偏移

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[github-actions[bot]]

👋 @DevQiao，感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[RylanBot]

尝试复现了一下，你的意思是想要 Empty 始终居中在可视区域...即绿色区域？让空状态脱离文档流感觉不太合理...它本身就是 Table 的一部分，如果 Table 不可见了，它本来就也应该不可见。

你可以参考下面的代码，自己监听滚动，并渲染自定义的 Empty（复杂页面可能要涉及 IntersectionObserver，因为不确定你的滚动容器到底是哪个）

import React, { useEffect, useRef, useState } from 'react';
import { Table } from 'tdesign-react';

const columns = [
  { colKey: 'id', title: 'ID', width: 1000 },
  { colKey: 'email', title: 'Email', width: 1000 },
  { colKey: 'phone', title: 'Phone', width: 1000 },
  { colKey: 'name', title: 'Name', width: 1000 },
];

export default function BaseTableExample() {
  const containerRef = useRef<HTMLDivElement>(null);
  const tableRef = useRef<HTMLDivElement>(null);
  const [scrollLeft, setScrollLeft] = useState<number>(0);

  const calculateEmptyPosition = () => {
    const tableElement = tableRef.current;
    const tableRect = tableElement?.getBoundingClientRect();

    const tableLeft = tableRect ? tableRect.left + scrollLeft : 0;
    const tableWidth = tableRect ? tableRect.width : window.innerWidth;

    const viewportLeft = scrollLeft;
    const viewportRight = scrollLeft + window.innerWidth;

    const visibleLeft = Math.max(tableLeft, viewportLeft);
    const visibleRight = Math.min(tableLeft + tableWidth, viewportRight);
    const visibleCenter = (visibleLeft + visibleRight) / 2;

    return visibleCenter - tableLeft;
  };

  useEffect(() => {
    const handleScroll = () => {
      setScrollLeft(window.scrollX);
    };

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  const CustomEmpty: React.FC = () => (
    <div
      style={{
        position: 'absolute',
        left: `${calculateEmptyPosition()}px`,
      }}
    >
      暂无数据
    </div>
  );

  return (
    <div
      ref={containerRef}
      style={{
        width: '150vw',
        overflowX: 'auto',
        position: 'relative',
      }}
    >
      <div ref={tableRef} style={{ width: '100vw' }}>
        <Table rowKey="id" bordered columns={columns} data={[]} empty={<CustomEmpty />} />
      </div>
    </div>
  );
}