[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]

👋 @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>
  );
}

[Logan-Qiao]

https://stackblitz.com/edit/idyamhew?file=src%2Fdemo.tsx

你看下 Antd 为什么能实现，因为他的预留的 empty 盒子css结构不是外围居中的，所以可以自定义

而你的 t-table__empty 直接就是 flex 布局 center，导致用户即使自定义，他的位置也无法变动，这是最简单基础的做法。 你外部盒子限制用户布局而指望用户自己处理脱离文档流的绕行办法，这不妥，也无法满足复杂需求

https://stackblitz.com/edit/963l2hyg?file=src%2Fdemo.tsx