fix(Table): dragSort failure when affix header is not mounted

Author: RylanBot

packages/components/hooks/useDomRefMount.ts

@@ -0,0 +1,60 @@
+import { useCallback, useRef } from 'react';
+
+function useDomRefMount<T extends HTMLElement = HTMLElement>(ref: React.MutableRefObject<T | null>) {
+  const callbacks = useRef<Array<(node: T) => void>>([]);
+  const unmountCallbacks = useRef<Array<() => void>>([]);
+
+  const onMount = useCallback(
+    (nodeOrCallback: T | ((node: T) => void)) => {
+      // 如果传入的是函数，则注册回调
+      if (typeof nodeOrCallback === 'function') {
+        callbacks.current.push(nodeOrCallback);
+        return;
+      }
+
+      // 否则是 ref 挂载
+      const node = nodeOrCallback as T;
+      const prevNode = ref?.current;
+
+      // 更新 ref
+      if (ref) {
+        // eslint-disable-next-line no-param-reassign
+        ref.current = node;
+      }
+
+      // 如果是新挂载（从 null 变为有值），触发所有挂载回调
+      if (node && !prevNode) {
+        callbacks.current.forEach((callback) => {
+          callback(node);
+        });
+      }
+
+      // 如果是卸载（从有值变为 null），触发所有卸载回调
+      if (!node && prevNode) {
+        unmountCallbacks.current.forEach((callback) => {
+          callback();
+        });
+      }
+
+      return node;
+    },
+    [], // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  const onUnmount = useCallback((callback: () => void) => {
+    unmountCallbacks.current.push(callback);
+  }, []);
+
+  const clearCallbacks = useCallback(() => {
+    callbacks.current = [];
+    unmountCallbacks.current = [];
+  }, []);
+
+  return {
+    onMount,
+    onUnmount,
+    clearCallbacks,
+  };
+}
+
+export default useDomRefMount;

packages/components/table/BaseTable.tsx

@@ -7,13 +7,15 @@ import React, {
   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';
 import useDefaultProps from '../hooks/useDefaultProps';
+import useDomRefMount from '../hooks/useDomRefMount';
 import useElementLazyRender from '../hooks/useElementLazyRender';
 import useVirtualScroll from '../hooks/useVirtualScroll';
 import Loading from '../loading';
@@ -125,6 +127,8 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
     footerBottomAffixRef,
   });
 
+  const { onMount: onAffixHeaderMount } = useDomRefMount(affixHeaderRef);
+
   const { dataSource, innerPagination, isPaginateData, renderPagination } = usePagination(props, tableContentRef);
 
   // 列宽拖拽逻辑
@@ -269,7 +273,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
   const scrollColumnIntoView = (colKey: string) => {
     if (!tableContentRef.current) return;
     const thDom = tableContentRef.current.querySelector(`th[data-colkey="${colKey}"]`);
-    const fixedThDom = tableContentRef.current.querySelectorAll('th.t-table__cell--fixed-left');
+    const fixedThDom = tableContentRef.current.querySelectorAll(`th.${classPrefix}-table__cell--fixed-left`);
     let totalWidth = 0;
     for (let i = 0, len = fixedThDom.length; i < len; i++) {
       totalWidth += fixedThDom[i].getBoundingClientRect().width;
@@ -286,6 +290,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
     tableHtmlElement: tableElmRef.current,
     tableContentElement: tableContentRef.current,
     affixHeaderElement: affixHeaderRef.current,
+    onAffixHeaderMount,
     refreshTable,
     scrollToElement: virtualConfig.scrollToElement,
     scrollColumnIntoView,
@@ -380,7 +385,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
     };
     const affixedHeader = Boolean((headerAffixedTop || virtualConfig.isVirtualScroll) && tableWidth) && (
       <div
-        ref={affixHeaderRef}
+        ref={onAffixHeaderMount}
         style={{ width: `${tableWidth}px`, opacity: headerOpacity }}
         className={classNames([
           'scrollbar',
@@ -495,7 +500,6 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
     tableContentRef,
     tableWidth,
     isWidthOverflow,
-    allTableClasses,
     rowKey,
     scroll: props.scroll,
     cellEmptyContent: props.cellEmptyContent,

packages/components/table/TBody.tsx

@@ -2,8 +2,9 @@
 import React, { type CSSProperties, type MutableRefObject, type ReactNode, useMemo } from 'react';
 import classNames from 'classnames';
 import { camelCase, get, pick } from 'lodash-es';
+
 import { useLocaleReceiver } from '../locale/LocalReceiver';
-import { TableClassName } from './hooks/useClassName';
+import useClassName from './hooks/useClassName';
 import useRowspanAndColspan from './hooks/useRowspanAndColspan';
 import TR, { ROW_LISTENERS, TABLE_PROPS, type TrProps } from './TR';
 
@@ -25,7 +26,6 @@ export interface TableBodyProps extends BaseTableProps {
   isWidthOverflow?: boolean;
   virtualConfig: VirtualScrollConfig;
   pagination?: PaginationProps;
-  allTableClasses?: TableClassName;
   handleRowMounted?: (params: RowMountedParams) => void;
 }
 
@@ -74,7 +74,7 @@ const trProperties = [
 
 export default function TBody(props: TableBodyProps) {
   // 如果不是变量复用，没必要对每一个参数进行解构（解构过程需要单独的内存空间存储临时变量）
-  const { data, columns, rowKey, firstFullRow, lastFullRow, virtualConfig, allTableClasses } = props;
+  const { data, columns, rowKey, firstFullRow, lastFullRow, virtualConfig } = props;
 
   const { isVirtualScroll } = virtualConfig;
   const renderData = isVirtualScroll ? virtualConfig.visibleData : data;
@@ -84,7 +84,7 @@ export default function TBody(props: TableBodyProps) {
   const { skipSpansMap } = useRowspanAndColspan(renderData, columns, rowKey, props.rowspanAndColspan);
   const isSkipSnapsMapNotFinish = Boolean(props.rowspanAndColspan && !skipSpansMap.size);
 
-  const { tableFullRowClasses, tableBaseClass } = allTableClasses;
+  const { tableFullRowClasses, tableBaseClass } = useClassName();
   const tbodyClasses = useMemo(() => [tableBaseClass.body], [tableBaseClass.body]);
   const hasFullRowConfig = useMemo(() => firstFullRow || lastFullRow, [firstFullRow, lastFullRow]);
 

packages/components/table/hooks/useDragSort.ts

@@ -419,26 +419,14 @@ function useDragSort(props: TdEnhancedTableProps, options: DragSortOptions) {
 
   // 注册拖拽事件
   useEffect(() => {
-    if (!primaryTableRef || !primaryTableRef.current) return;
-    registerRowDragEvent(primaryTableRef.current?.tableElement);
-    registerColDragEvent(primaryTableRef.current?.tableHtmlElement);
-    /** 待表头节点准备完成后 */
-    const timer = setTimeout(() => {
-      if (primaryTableRef.current?.affixHeaderElement) {
-        registerColDragEvent(primaryTableRef.current.affixHeaderElement);
-      }
-      clearTimeout(timer);
+    if (!primaryTableRef.current) return;
+    registerRowDragEvent(primaryTableRef.current.tableElement);
+    registerColDragEvent(primaryTableRef.current.tableHtmlElement);
+    primaryTableRef.current.onAffixHeaderMount((el: HTMLDivElement) => {
+      registerColDragEvent(el);
     });
-    return () => {
-      clearTimeout(timer);
-      dragRowInstance.current?.destroy();
-      dragRowInstance.current = null;
-      dragColInstance.current?.destroy();
-      dragColInstance.current = null;
-      unlockScrollContainer();
-    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [primaryTableRef, columns, dragSort, innerPagination]);
+  }, [columns, dragSort, innerPagination]);
 
   return {
     isRowDraggable,