fix: fixed Table column not aligned when header is sticky #1760 (#1761)

Co-authored-by: shijia.me <[email protected]>

packages/semi-ui/table/Table.tsx

@@ -288,6 +288,10 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
                     isFixed = flattenColumns.some(column => (Boolean(column.ellipsis) || Boolean(column.fixed)));
                 }
 
+                if (this.adapter.useFixedHeader()) {
+                    isFixed = true;
+                }
+
                 return isFixed ? 'fixed' : 'auto';
             },
             setHeadWidths: (headWidths: Array<BaseHeadWidth>, index = 0) => {

packages/semi-ui/table/_story/table.stories.jsx

@@ -98,7 +98,8 @@ export {
     EllipsisNormalTable, EllipsisFixedTable, ShowTitleTable,
     Fixed1556,
     FixedColumnAlign,
-    FixOnChange
+    FixOnChange,
+    FixedSticky
 } from './v2';
 export { default as FixSelectAll325 } from './Demos/rowSelection';
 

packages/semi-ui/table/_story/v2/FixedSticky/index.tsx

@@ -0,0 +1,48 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { Table } from '@douyinfe/semi-ui';
+
+function App() {
+    const DAY = 24 * 60 * 60 * 1000;
+    const [dataSource, setData] = useState([]);
+
+    const getData = () => {
+        const data = [];
+        for (let i = 0; i < 46; i++) {
+            const isSemiDesign = i % 2 === 0;
+            const randomNumber = (i * 1000) % 199;
+            data.push({
+                key: '' + i,
+                name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi Pro 设计稿${i}.fig`,
+                owner: isSemiDesign ? '姜鹏志' : '郝宣',
+                size: randomNumber,
+                updateTime: new Date('2023-01-31').valueOf() + randomNumber * DAY,
+                avatarBg: isSemiDesign ? 'grey' : 'red',
+            });
+        }
+        return data;
+    };
+
+    useEffect(() => {
+        const data = getData();
+        setData(data);
+    }, []);
+
+    return (
+        <div style={{ height: '250vh' }}>
+            <div style={{ marginTop: 200 }}>
+                <h4>top = 100 + no fixed column + no scroll</h4>
+                <div>
+                    <Table dataSource={dataSource} sticky={{ top: 100 }}>
+                        <Table.Column title="标题" dataIndex="name" key="name" />
+                        <Table.Column title="大小" dataIndex="size" key="size" />
+                        <Table.Column title="所有者" dataIndex="owner" key="owner" />
+                        <Table.Column title="更新时间" dataIndex="updateTime" key="updateTime" />
+                        <Table.Column title="" dataIndex="operate" key="operate" />
+                    </Table>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default App;

packages/semi-ui/table/_story/v2/index.js

@@ -20,3 +20,4 @@ export { EllipsisNormalTable, EllipsisFixedTable, ShowTitleTable } from './FeatE
 export { default as Fixed1556 } from './Fixed1556';
 export { default as FixedColumnAlign } from './FixedColumnAlign';
 export { default as FixOnChange } from './FixOnChange';
+export { default as FixedSticky } from './FixedSticky';