fix: support sticky when virtual (#1027)

Author: linxianxi

package.json

@@ -58,7 +58,7 @@
     "classnames": "^2.2.5",
     "rc-resize-observer": "^1.1.0",
     "rc-util": "^5.36.0",
-    "rc-virtual-list": "^3.10.7"
+    "rc-virtual-list": "^3.11.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.2",

src/Table.tsx

@@ -669,7 +669,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
           </FixedHolder>
         )}
 
-        {isSticky && (
+        {isSticky && scrollBodyRef.current instanceof Element && (
           <StickyScrollBar
             ref={stickyRef}
             offsetScroll={offsetScroll}

src/VirtualTable/BodyGrid.tsx

@@ -40,7 +40,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
     'emptyNode',
     'scrollX',
   ]);
-  const { scrollY, listItemHeight } = useContext(StaticContext);
+  const { sticky, scrollY, listItemHeight } = useContext(StaticContext);
 
   // =========================== Ref ============================
   const listRef = React.useRef<ListRef>();
@@ -195,10 +195,21 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
 
   let bodyContent: React.ReactNode;
   if (flattenData.length) {
+    // ========================== Sticky Scroll Bar ==========================
+    const horizontalScrollBarStyle: React.CSSProperties = {};
+    if (sticky) {
+      horizontalScrollBarStyle.position = 'sticky';
+      horizontalScrollBarStyle.bottom = 0;
+      if (typeof sticky === 'object' && sticky.offsetScroll) {
+        horizontalScrollBarStyle.bottom = sticky.offsetScroll;
+      }
+    }
+
     bodyContent = (
       <VirtualList<FlattenData<any>>
         fullHeight={false}
         ref={listRef}
+        styles={{ horizontalScrollBar: horizontalScrollBarStyle }}
         className={classNames(tblPrefixCls, `${tblPrefixCls}-virtual`)}
         height={scrollY}
         itemHeight={listItemHeight || 24}

src/VirtualTable/context.ts

@@ -1,8 +1,10 @@
 import { createContext } from '@rc-component/context';
+import type { TableSticky } from '../interface';
 
 export interface StaticContextProps {
   scrollY: number;
   listItemHeight: number;
+  sticky: boolean | TableSticky;
 }
 
 export const StaticContext = createContext<StaticContextProps>(null);

src/VirtualTable/index.tsx

@@ -24,7 +24,7 @@ export interface VirtualTableProps<RecordType> extends Omit<TableProps<RecordTyp
 }
 
 function VirtualTable<RecordType>(props: VirtualTableProps<RecordType>) {
-  const { columns, scroll, prefixCls = DEFAULT_PREFIX, className, listItemHeight } = props;
+  const { columns, scroll, sticky, prefixCls = DEFAULT_PREFIX, className, listItemHeight } = props;
 
   let { x: scrollX, y: scrollY } = scroll || {};
 
@@ -47,7 +47,10 @@ function VirtualTable<RecordType>(props: VirtualTableProps<RecordType>) {
   }
 
   // ========================= Context ==========================
-  const context = React.useMemo(() => ({ scrollY, listItemHeight }), [scrollY, listItemHeight]);
+  const context = React.useMemo(
+    () => ({ sticky, scrollY, listItemHeight }),
+    [sticky, scrollY, listItemHeight],
+  );
 
   // ========================== Render ==========================
   return (

tests/Virtual.spec.tsx

@@ -268,4 +268,31 @@ describe('Table.Virtual', () => {
       '1128',
     );
   });
+
+  it('sticky header with virtual should work', async () => {
+    const { container } = getTable({ sticky: { offsetHeader: 10 } });
+
+    await waitFakeTimer();
+
+    expect(container.querySelector('.rc-table-header')).toHaveStyle({
+      overflow: 'hidden',
+      top: '10px',
+    });
+
+    expect(container.querySelector('.rc-table-header')).toHaveClass(
+      'rc-table-header',
+      'rc-table-sticky-holder',
+    );
+  });
+
+  it('sticky scrollbar with virtual should work', async () => {
+    const { container } = getTable({ sticky: { offsetScroll: 10 } });
+
+    await waitFakeTimer();
+
+    expect(container.querySelector('.rc-virtual-list-scrollbar-horizontal')).toHaveStyle({
+      position: 'sticky',
+      bottom: '10px',
+    });
+  });
 });