fix(Table): enhance affix header and footer offsets

Author: RylanBot

packages/components/table/BaseTable.tsx

@@ -73,14 +73,16 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
 
   // 1. 表头吸顶；2. 表尾吸底；3. 底部滚动条吸底；4. 分页器吸底
   const {
+    headerOffset,
+    footerOffset,
     affixHeaderRef,
     affixFooterRef,
     horizontalScrollbarRef,
     paginationRef,
     showAffixHeader,
     showAffixFooter,
     showAffixPagination,
-    onHorizontalScroll,
+    onTableHorizontalScroll,
     setTableContentRef,
     updateAffixHeaderOrFooter,
   } = useAffix(props, { showElement });
@@ -184,7 +186,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
 
   const onFixedChange = () => {
     const timer = setTimeout(() => {
-      onHorizontalScroll();
+      onTableHorizontalScroll();
       updateAffixHeaderOrFooter();
       clearTimeout(timer);
     }, 0);
@@ -244,7 +246,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
       updateColumnFixedShadow(target);
     }
     lastScrollY = top;
-    onHorizontalScroll(target);
+    onTableHorizontalScroll(target);
     emitScrollEvent(e);
   };
 
@@ -628,6 +630,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
     [
       // eslint-disable-next-line
       ...headUseMemoDependencies,
+      headerOffset,
       showAffixHeader,
       tableWidth,
       tableElmWidth,
@@ -646,7 +649,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
     renderAffixedFooter,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
-      // eslint-disable-next-line react-hooks/exhaustive-deps
+      footerOffset,
       showAffixFooter,
       isFixedHeader,
       rowAndColFixedPosition,

packages/components/table/_example/fixed-column.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
-import { Table, Radio, Checkbox, Space, Tag, Link } from 'tdesign-react';
-import { ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-react';
+import { Button, Checkbox, Link, Radio, Space, Table, Tag } from 'tdesign-react';
+import { CheckCircleFilledIcon, CloseCircleFilledIcon, ErrorCircleFilledIcon } from 'tdesign-icons-react';
 
 import type { TableProps } from 'tdesign-react';
 
@@ -27,13 +27,13 @@ const statusNameListMap = {
 };
 
 export default function TableFixedColumn() {
+  const tableRef = useRef(null);
+
   const [tableLayout, setTableLayout] = useState<TableProps['tableLayout']>('fixed');
   const [emptyData, setEmptyData] = useState(false);
   const [leftFixedColumn, setLeftFixedColumn] = useState(2);
   const [rightFixedColumn, setReftFixedColumn] = useState(1);
 
-  const tableRef = useRef(null);
-  // eslint-disable-next-line
   const scrollToCreateTime = () => {
     // 横向滚动到指定列，一般用于列数量较多的场景
     tableRef.current.scrollColumnIntoView('createTime');
@@ -42,6 +42,7 @@ export default function TableFixedColumn() {
   const table = (
     <Table
       ref={tableRef}
+      style={{ maxWidth: '800px' }}
       bordered
       rowKey="index"
       data={emptyData ? [] : data}
@@ -101,7 +102,7 @@ export default function TableFixedColumn() {
         <Radio.Button value={2}>右侧固定两列</Radio.Button>
       </Radio.Group>
 
-      <div>
+      <Space align="center">
         <Radio.Group
           value={tableLayout}
           variant="default-filled"
@@ -110,10 +111,13 @@ export default function TableFixedColumn() {
           <Radio.Button value="fixed">table-layout: fixed</Radio.Button>
           <Radio.Button value="auto">table-layout: auto</Radio.Button>
         </Radio.Group>
-        <Checkbox value={emptyData} onChange={setEmptyData} style={{ marginLeft: '16px', verticalAlign: 'middle' }}>
+        <Button onClick={scrollToCreateTime} variant="dashed">
+          滚动到指定列
+        </Button>
+        <Checkbox value={emptyData} onChange={setEmptyData}>
           空数据
         </Checkbox>
-      </div>
+      </Space>
 
       {table}
     </Space>

packages/components/table/_example/fixed-header-col.tsx

@@ -19,7 +19,6 @@ for (let i = 0; i < 20; i++) {
     index: i,
     applicant: ['贾明', '张三', '王芳'][i % 3],
     status: i % 3,
-    channel: ['电子签署', '纸质签署', '纸质签署'][i % 3],
     detail: {
       email: ['[email protected]', '[email protected]', '[email protected]'][i % 3],
     },
@@ -65,7 +64,6 @@ export default function TableFixedColumn() {
             );
           },
         },
-        { colKey: 'channel', title: '签署方式' },
         { colKey: 'matters', title: '申请事项', width: '150', foot: '-' },
         { colKey: 'detail.email', title: '邮箱地址' },
         { colKey: 'createTime', title: '申请日期', width: '120', foot: '-' },