fix: fix the wrong scroll position when table fixed column (#1235)

* fix: fix the wrong scroll position when table fixed column

* fix: fix the wrong scroll position when table fixed column

Co-authored-by: pointhalo <[email protected]>

packages/semi-foundation/table/constants.ts

@@ -60,6 +60,7 @@ const DEFAULT_CELL_MIDDLE_PADDING_BOTTOM = 12;
 const DEFAULT_CELL_SMALL_PADDING_TOP = 8;
 const DEFAULT_CELL_SMALL_PADDING_BOTTOM = 8;
 const DEFAULT_CELL_LINE_HEIGHT = 20;
+const DEFAULT_EMPTYSLOT_HEIGHT = 52;
 
 // normal size
 const DEFAULT_VIRTUALIZED_ROW_HEIGHT =
@@ -118,6 +119,7 @@ const numbers = {
     DEFAULT_VIRTUALIZED_SECTION_ROW_SMALL_HEIGHT: DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
     DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
     DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT,
+    DEFAULT_EMPTYSLOT_HEIGHT
 } as const;
 
 export { cssClasses, strings, numbers };

packages/semi-foundation/table/table.scss

@@ -481,7 +481,8 @@ $module: #{$prefix}-table;
     }
 
     &-placeholder {
-        position: relative;
+        position: sticky;
+        left: 0px;
         z-index: 1;
         padding: #{$spacing-table-paddingY} #{$spacing-table-paddingX};
         color: $color-table_placeholder-text-default;

packages/semi-ui/table/Body/index.tsx

@@ -19,7 +19,7 @@ import {
     isTreeTable
 } from '@douyinfe/semi-foundation/table/utils';
 import BodyFoundation, { BodyAdapter, FlattenData, GroupFlattenData } from '@douyinfe/semi-foundation/table/bodyFoundation';
-import { strings } from '@douyinfe/semi-foundation/table/constants';
+import { strings, numbers } from '@douyinfe/semi-foundation/table/constants';
 import Store from '@douyinfe/semi-foundation/utils/Store';
 
 import BaseComponent, { BaseProps } from '../../_base/baseComponent';
@@ -391,8 +391,9 @@ class Body extends BaseComponent<BodyProps, BodyState> {
                 }}
             >
                 <div style={{ width: tableWidth }} className={tableCls}>
-                    {size(dataSource) === 0 ? emptySlot : children}
+                    {children}
                 </div>
+                {size(dataSource) === 0 && emptySlot}
             </div>
         );
     });
@@ -423,7 +424,7 @@ class Body extends BaseComponent<BodyProps, BodyState> {
 
         const listStyle = {
             width: '100%',
-            height: virtualizedData?.length ? y : 0,
+            height: virtualizedData?.length ? y : numbers.DEFAULT_EMPTYSLOT_HEIGHT,
             overflowX: 'auto',
             overflowY: 'auto',
         } as const;
@@ -789,7 +790,7 @@ class Body extends BaseComponent<BodyProps, BodyState> {
                 onScroll={handleBodyScroll}
             >
                 <Table
-                    role={ isMap(groups) || isFunction(expandedRowRender) || isTreeTable({ dataSource }) ? 'treegrid' : 'grid'}
+                    role={isMap(groups) || isFunction(expandedRowRender) || isTreeTable({ dataSource }) ? 'treegrid' : 'grid'}
                     aria-rowcount={dataSource && dataSource.length}
                     aria-colcount={columns && columns.length}
                     style={tableStyle}

packages/semi-ui/table/Table.tsx

@@ -1091,8 +1091,8 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
                 headerRef: this._cacheHeaderRef,
                 bodyRef: this.bodyWrapRef,
                 includeHeader: !useFixedHeader,
+                emptySlot
             }),
-            emptySlot,
             this.renderFooter(props),
         ];
 
@@ -1119,7 +1119,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             dataSource,
             bodyHasScrollBar,
             disabledRowKeysSet,
-            sticky
+            sticky,
         } = props;
         const selectedRowKeysSet = get(rowSelection, 'selectedRowKeysSet', new Set());