fix: scroll.x not working when no fixed column exists (#1023)

* fix: table col cal

* test: add test case

Author: zombieJ

src/VirtualTable/index.tsx

@@ -30,6 +30,10 @@ function VirtualTable<RecordType>(props: VirtualTableProps<RecordType>) {
 
   // Fill scrollX
   if (typeof scrollX !== 'number') {
+    if (process.env.NODE_ENV !== 'production') {
+      warning(!scrollX, '`scroll.x` in virtual table must be number.');
+    }
+
     scrollX = 1;
   }
 

src/hooks/useColumns/useWidthColumns.tsx

@@ -67,12 +67,14 @@ export default function useWidthColumns(
         return clone;
       });
 
+      const maxFitWidth = Math.max(scrollWidth, clientWidth);
+
       // If realTotal is less than clientWidth,
       // We need extend column width
-      if (realTotal < clientWidth) {
-        const scale = clientWidth / realTotal;
+      if (realTotal < maxFitWidth) {
+        const scale = maxFitWidth / realTotal;
 
-        restWidth = clientWidth;
+        restWidth = maxFitWidth;
 
         filledColumns.forEach((col: any, index) => {
           const colWidth = Math.floor(col.width * scale);
@@ -83,7 +85,7 @@ export default function useWidthColumns(
         });
       }
 
-      return [filledColumns, Math.max(realTotal, clientWidth)];
+      return [filledColumns, Math.max(realTotal, maxFitWidth)];
     }
 
     return [flattenColumns, scrollWidth];

tests/Virtual.spec.tsx

@@ -103,9 +103,12 @@ describe('Table.Virtual', () => {
     const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
 
     getTable({
-      scroll: {} as any,
+      scroll: {
+        x: true,
+      } as any,
     });
 
+    expect(errSpy).toHaveBeenCalledWith('Warning: `scroll.x` in virtual table must be number.');
     expect(errSpy).toHaveBeenCalledWith('Warning: `scroll.y` in virtual table must be number.');
   });
 
@@ -199,7 +202,7 @@ describe('Table.Virtual', () => {
         },
       ],
       scroll: {
-        x: 1128,
+        x: 100,
         y: 10,
       },
       data: [{}],
@@ -244,4 +247,25 @@ describe('Table.Virtual', () => {
     expect(container.querySelectorAll('col')[0]).toHaveStyle({ width: '100px' });
     expect(container.querySelectorAll('col')[1]).toHaveStyle({ width: '100px' });
   });
+
+  it('should fill width as scrollX if scrollX is larger', async () => {
+    const { container } = getTable({
+      columns: [
+        {
+          width: 100,
+        },
+      ],
+      scroll: {
+        x: 1128,
+        y: 10,
+      },
+      getContainerWidth: () => 200,
+      data: [{}],
+    });
+
+    expect(container.querySelector('.rc-virtual-list')).toHaveAttribute(
+      'data-scroll-width',
+      '1128',
+    );
+  });
 });

tsconfig.json

@@ -14,5 +14,5 @@
     },
     "types": ["vitest/globals"]
   },
-  "include": [".dumi/**/*", ".dumirc.ts", "**/*.ts", "**/*.tsx"]
+  "include": [".dumirc.ts", "**/*.ts", "**/*.tsx"]
 }