fix(Table): affix width not correct when there is a fixed column (#4172)

* chore(Affix): update demo

* fix(Table): affix width not correct when there is a fixed column

* perf: replace `useRef` with `useState`

* fix(Affix): prevent negative `fixedTop`

* chore: stash changelog [ci skip]

---------

Co-authored-by: tdesign-bot <tdesign@tencent.com>

Author: RylanBot

packages/components/affix/Affix.tsx

@@ -59,7 +59,9 @@ const Affix = forwardRef<AffixRef, AffixProps>((props, ref) => {
         let fixedTop: number | false;
         if (props.offsetBottom !== undefined && props.offsetTop === undefined) {
           const bottomThreshold = containerToBottom - (offsetBottom ?? 0);
-          if (wrapToBottom >= bottomThreshold) {
+          // When the container has scrolled out of the viewport
+          // the affix element should not be fixed to avoid a negative top value
+          if (containerToBottom > 0 && wrapToBottom >= bottomThreshold) {
             fixedTop = bottomThreshold - wrapHeight;
           } else {
             fixedTop = false;

packages/components/affix/_example/container.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React, { useRef } from 'react';
 import { Affix, Button } from 'tdesign-react';
 
 export default function ContainerExample() {
-  const [container, setContainer] = useState(null);
+  const containerRef = useRef<HTMLDivElement>();
 
   const backgroundStyle = {
     height: '1500px',
@@ -18,7 +18,7 @@ export default function ContainerExample() {
 
   return (
     <div
-      ref={setContainer}
+      ref={containerRef}
       style={{
         border: '1px solid var(--component-stroke)',
         borderRadius: '3px',
@@ -29,10 +29,10 @@ export default function ContainerExample() {
       }}
     >
       <div style={backgroundStyle}>
-        <Affix zIndex={10} offsetTop={50} container={container}>
+        <Affix zIndex={10} offsetTop={50} container={() => containerRef.current}>
           <Button>Top</Button>
         </Affix>
-        <Affix offsetBottom={50} container={container}>
+        <Affix offsetBottom={50} container={() => containerRef.current}>
           <Button>Bottom</Button>
         </Affix>
       </div>

packages/components/table/BaseTable.tsx

@@ -1,6 +1,7 @@
-import React, { forwardRef, RefAttributes, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, type RefAttributes, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { pick } from 'lodash-es';
+
 import log from '@tdesign/common-js/log/index';
 import { getIEVersion } from '@tdesign/common-js/utils/helper';
 import Affix, { type AffixRef } from '../affix';
@@ -365,14 +366,14 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
     const barWidth = isWidthOverflow ? scrollbarWidth : 0;
     const affixHeaderWrapHeight = affixHeaderHeight - barWidth;
     const affixHeaderWrapHeightStyle = {
-      width: `${tableWidth.current}px`,
+      width: `${tableWidth}px`,
       height: `${affixHeaderWrapHeight}px`,
       opacity: headerOpacity,
     };
-    const affixedHeader = Boolean((headerAffixedTop || virtualConfig.isVirtualScroll) && tableWidth.current) && (
+    const affixedHeader = Boolean((headerAffixedTop || virtualConfig.isVirtualScroll) && tableWidth) && (
       <div
         ref={affixHeaderRef}
-        style={{ width: `${tableWidth.current - borderWidth}px`, opacity: headerOpacity }}
+        style={{ width: `${tableWidth}px`, opacity: headerOpacity }}
         className={classNames([
           'scrollbar',
           {
@@ -382,7 +383,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
       >
         <table
           className={classNames(tableElmClasses)}
-          style={{ ...tableElementStyles, width: tableElmWidth.current ? `${tableElmWidth.current}px` : undefined }}
+          style={{ ...tableElementStyles, width: tableElmWidth ? `${tableElmWidth}px` : undefined }}
         >
           {renderColGroup(true)}
           {showHeader && <THead {...headProps} />}
@@ -431,7 +432,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
     const totalMarginTop = tableFootHeight + marginScrollbarWidth;
     const hasFooter = props.footData?.length || props.footerSummary;
     const affixedFooter = Boolean(
-      (virtualConfig.isVirtualScroll || props.footerAffixedBottom) && hasFooter && tableWidth.current,
+      (virtualConfig.isVirtualScroll || props.footerAffixedBottom) && hasFooter && tableWidth,
     ) && (
       <Affix
         className={tableBaseClass.affixedFooterWrap}
@@ -443,15 +444,15 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
       >
         <div
           ref={affixFooterRef}
-          style={{ width: `${tableWidth.current - borderWidth}px`, opacity: Number(showAffixFooter) }}
+          style={{ width: `${tableWidth}px`, opacity: Number(showAffixFooter) }}
           className={classNames([
             'scrollbar',
             { [tableBaseClass.affixedFooterElm]: props.footerAffixedBottom || virtualConfig.isVirtualScroll },
           ])}
         >
           <table
             className={tableElmClasses}
-            style={{ ...tableElementStyles, width: tableElmWidth.current ? `${tableElmWidth.current}px` : undefined }}
+            style={{ ...tableElementStyles, width: tableElmWidth ? `${tableElmWidth}px` : undefined }}
           >
             {renderColGroup(true)}
             <TFoot
@@ -516,8 +517,8 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
         style={{
           ...tableElementStyles,
           width:
-            resizable && isWidthOverflow && tableElmWidth.current
-              ? `${tableElmWidth.current}px`
+            resizable && isWidthOverflow && tableElmWidth
+              ? `${tableElmWidth}px`
               : tableElementStyles.width,
         }}
       >
@@ -633,7 +634,6 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
       tableElmClasses,
       tableElementStyles,
       columns,
-      spansAndLeafNodes,
       showHeader,
       props.headerAffixedTop,
     ],
@@ -655,7 +655,6 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
       tableElmWidth,
       affixFooterRef,
       borderWidth,
-      bordered,
       isWidthOverflow,
       scrollbarWidth,
       tableElmClasses,
@@ -669,7 +668,6 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
       props.footerSummary,
       props.footerAffixedBottom,
       props.rowspanAndColspanInFooter,
-      tableWidth.current,
     ],
   );
 
@@ -698,12 +696,12 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
         ref={horizontalScrollbarRef}
         className={classNames(['scrollbar', tableBaseClass.obviousScrollbar])}
         style={{
-          width: `${tableWidth.current}px`,
+          width: `${tableWidth}px`,
           overflow: 'auto',
           opacity: Number(showAffixFooter),
         }}
       >
-        <div style={{ width: `${tableElmWidth.current}px`, height: '5px' }}></div>
+        <div style={{ width: `${tableElmWidth}px`, height: '5px' }}></div>
       </div>
     </Affix>
   );

packages/components/table/TBody.tsx

@@ -21,7 +21,7 @@ export interface TableBodyProps extends BaseTableProps {
   tableRef?: MutableRefObject<HTMLDivElement>;
   tableContentRef?: MutableRefObject<HTMLDivElement>;
   cellEmptyContent: TdBaseTableProps['cellEmptyContent'];
-  tableWidth?: MutableRefObject<number>;
+  tableWidth?: number;
   isWidthOverflow?: boolean;
   virtualConfig: VirtualScrollConfig;
   pagination?: PaginationProps;
@@ -95,7 +95,7 @@ export default function TBody(props: TableBodyProps) {
       <td colSpan={columns.length}>
         <div
           className={classNames([tableBaseClass.empty, { [tableFullRowClasses.innerFullRow]: props.isWidthOverflow }])}
-          style={props.isWidthOverflow ? { width: `${props.tableWidth.current}px` } : {}}
+          style={props.isWidthOverflow ? { width: `${props.tableWidth}px` } : {}}
         >
           {props.empty || t(global.empty)}
         </div>
@@ -139,7 +139,7 @@ export default function TBody(props: TableBodyProps) {
         <td colSpan={columns.length}>
           <div
             className={classNames({ [tableFullRowClasses.innerFullRow]: isFixedToLeft }) || undefined}
-            style={isFixedToLeft ? { width: `${props.tableWidth.current}px` } : {}}
+            style={isFixedToLeft ? { width: `${props.tableWidth}px` } : {}}
           >
             <div className={tableFullRowClasses.innerFullElement}>{fullRowNode}</div>
           </div>
@@ -153,7 +153,7 @@ export default function TBody(props: TableBodyProps) {
       row,
       index: rowIndex,
       columns,
-      tableWidth: props.tableWidth.current,
+      tableWidth: props.tableWidth,
       isWidthOverflow: props.isWidthOverflow,
     };
     return props.renderExpandedRow?.(p);

packages/components/table/hooks/useFixed.ts

@@ -91,13 +91,20 @@ export default function useFixed(
     maxHeight,
     headerAffixedTop,
     bordered,
+    resizable: columnResizable,
   } = props;
+
   const preFinalColumns = usePrevious(finalColumns);
-  const [data, setData] = useState<TableRowData[]>([]);
+
   const tableContentRef = useRef<HTMLDivElement>(null);
+  const tableElmRef = useRef<HTMLTableElement>(null);
+  const thWidthList = useRef<{ [colKey: string]: number }>({});
+
+  const [data, setData] = useState<TableRowData[]>([]);
   const [isFixedHeader, setIsFixedHeader] = useState(false);
   const [isWidthOverflow, setIsWidthOverflow] = useState(false);
-  const tableElmRef = useRef<HTMLTableElement>(null);
+  const [tableWidth, setTableWidth] = useState(0);
+  const [tableElmWidth, setTableElmWidthState] = useState(0);
   // CSS 样式设置了固定 6px
   const [scrollbarWidth, setScrollbarWidth] = useState(6);
   // 固定列、固定表头、固定表尾等内容的位置信息
@@ -111,16 +118,10 @@ export default function useFixed(
     left: 0,
     top: 0,
   });
-  const tableWidth = useRef(0);
-  const tableElmWidth = useRef(0);
-  const thWidthList = useRef<{ [colKey: string]: number }>({});
-
   const [isFixedColumn, setIsFixedColumn] = useState(false);
   const [isFixedRightColumn, setIsFixedRightColumn] = useState(false);
   const [isFixedLeftColumn, setIsFixedLeftColumn] = useState(false);
 
-  const columnResizable = props.resizable;
-
   // 没有表头吸顶，没有虚拟滚动，则不需要表头宽度计算
   const notNeedThWidthList = useMemo(
     () =>
@@ -363,17 +364,16 @@ export default function useFixed(
   }, []);
 
   const setTableElmWidth = (width: number) => {
-    if (tableElmWidth.current === width) return;
-    tableElmWidth.current = width;
+    if (tableElmWidth === width) return;
+    setTableElmWidthState(width);
   };
 
   const updateTableWidth = () => {
     const tRef = tableContentRef.current;
-    const rect = tRef?.getBoundingClientRect?.();
-    if (!rect) return;
-    // 去除滚动条宽度
-    const reduceWidth = isWidthOverflow ? scrollbarWidth : 0;
-    tableWidth.current = rect.width - reduceWidth - (props.bordered ? 1 : 0);
+    if (!tRef) return;
+    // clientWidth excludes border and scrollbar
+    setTableWidth(tRef.clientWidth);
+
     const elmRect = tableElmRef?.current?.getBoundingClientRect();
     if (elmRect?.width) {
       setTableElmWidth(elmRect?.width);

packages/tdesign-react/.changelog/pr-4172.md

@@ -0,0 +1,7 @@
+---
+pr_number: 4172
+contributor: RylanBot
+---
+
+- fix(Table): 修复存在 `fixed` 列时，吸顶表头和吸底表尾和表格不对齐的问题 @RylanBot ([#4172](https://github.com/Tencent/tdesign-react/pull/4172))
+- fix(Affix): 修复 `offsetBottom` 模式下容器滚出视口时 `top` 计算为负值的问题 @RylanBot ([#4172](https://github.com/Tencent/tdesign-react/pull/4172))