fix: virtual table should be able to scroll when empty (#1135)

* fix: virtual table should be able to scroll when empty * chore: remove console * chore: update logic * chore: update logic * chore: space code * test: update snap * test: add case * chore: simplify code
react-component · May 27, 2024 · b08600c · b08600c
1 parent 6891684
commit b08600c
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 35 deletions.
diff --git a/src/Body/ExpandedRow.tsx b/src/Body/ExpandedRow.tsx
@@ -44,7 +44,7 @@ function ExpandedRow(props: ExpandedRowProps) {
     contentNode = (
       <div
         style={{
-          width: componentWidth - (fixHeader ? scrollbarSize : 0),
+          width: componentWidth - (fixHeader && !isEmpty ? scrollbarSize : 0),
           position: 'sticky',
           left: 0,
           overflow: 'hidden',

diff --git a/src/Table.tsx b/src/Table.tsx
@@ -385,7 +385,7 @@ function Table<RecordType extends DefaultRecordType>(
 
   if (fixHeader) {
     scrollYStyle = {
-      overflowY: 'scroll',
+      overflowY: hasData ? 'scroll' : 'auto',
       maxHeight: scroll.y,
     };
   }

diff --git a/src/VirtualTable/BodyGrid.tsx b/src/VirtualTable/BodyGrid.tsx
@@ -1,8 +1,6 @@
 import { useContext } from '@rc-component/context';
-import classNames from 'classnames';
 import VirtualList, { type ListProps, type ListRef } from 'rc-virtual-list';
 import * as React from 'react';
-import Cell from '../Cell';
 import TableContext, { responseImmutable } from '../context/TableContext';
 import useFlattenRecords, { type FlattenData } from '../hooks/useFlattenRecords';
 import type { ColumnType, OnCustomizeScroll, ScrollConfig } from '../interface';
@@ -29,7 +27,6 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
     expandedKeys,
     prefixCls,
     childrenColumnName,
-    emptyNode,
     scrollX,
   } = useContext(TableContext, [
     'flattenColumns',
@@ -38,7 +35,6 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
     'prefixCls',
     'expandedKeys',
     'childrenColumnName',
-    'emptyNode',
     'scrollX',
   ]);
   const {
@@ -206,22 +202,19 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
 
   // default 'div' in rc-virtual-list
   const wrapperComponent = getComponent(['body', 'wrapper']);
-  const RowComponent = getComponent(['body', 'row'], 'div');
-  const cellComponent = getComponent(['body', 'cell'], 'div');
-
-  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;
-      }
+
+  // ========================== 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 = (
+  return (
+    <GridContext.Provider value={gridContext}>
       <VirtualList<FlattenData<any>>
         fullHeight={false}
         ref={listRef}
@@ -247,18 +240,8 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
           return <BodyLine data={item} rowKey={rowKey} index={index} style={itemProps.style} />;
         }}
       </VirtualList>
-    );
-  } else {
-    bodyContent = (
-      <RowComponent className={classNames(`${prefixCls}-placeholder`)}>
-        <Cell component={cellComponent} prefixCls={prefixCls}>
-          {emptyNode}
-        </Cell>
-      </RowComponent>
-    );
-  }
-
-  return <GridContext.Provider value={gridContext}>{bodyContent}</GridContext.Provider>;
+    </GridContext.Provider>
+  );
 });
 
 const ResponseGrid = responseImmutable(Grid);

diff --git a/src/VirtualTable/index.tsx b/src/VirtualTable/index.tsx
@@ -26,6 +26,7 @@ export interface VirtualTableProps<RecordType> extends Omit<TableProps<RecordTyp
 
 function VirtualTable<RecordType>(props: VirtualTableProps<RecordType>, ref: React.Ref<Reference>) {
   const {
+    data,
     columns,
     scroll,
     sticky,
@@ -81,7 +82,8 @@ function VirtualTable<RecordType>(props: VirtualTableProps<RecordType>, ref: Rea
         }}
         components={{
           ...components,
-          body: renderBody,
+          // fix https://github.com/ant-design/ant-design/issues/48991
+          body: data?.length ? renderBody : undefined,
         }}
         columns={columns}
         internalHooks={INTERNAL_HOOKS}

diff --git a/tests/Virtual.spec.tsx b/tests/Virtual.spec.tsx
@@ -443,4 +443,14 @@ describe('Table.Virtual', () => {
     fireEvent.scroll(container.querySelector('.rc-table-tbody-virtual-holder')!);
     expect(onScroll).toHaveBeenCalled();
   });
+
+  it('scrollable when empty', async () => {
+    const onScroll = vi.fn();
+    const { container } = getTable({ data: [], onScroll });
+
+    await waitFakeTimer();
+
+    fireEvent.scroll(container.querySelector('.rc-table-body'));
+    expect(onScroll).toHaveBeenCalled();
+  });
 });
diff --git a/tests/__snapshots__/FixedColumn.spec.tsx.snap b/tests/__snapshots__/FixedColumn.spec.tsx.snap
@@ -2951,7 +2951,7 @@ LoadedCheerio {
       </div>
       <div
         class="rc-table-body"
-        style="overflow-x: auto; overflow-y: scroll; max-height: 100px;"
+        style="overflow-x: auto; overflow-y: auto; max-height: 100px;"
       >
         <table
           style="width: 1200px; min-width: 100%; table-layout: fixed;"
@@ -3102,7 +3102,7 @@ LoadedCheerio {
               >
                 <div
                   class="rc-table-expanded-row-fixed"
-                  style="width: 985px; position: sticky; left: 0px; overflow: hidden;"
+                  style="width: 1000px; position: sticky; left: 0px; overflow: hidden;"
                 >
                   No Data
                 </div>