fix: Width exceed logic (#1034)

* fix: over strecth logic

* test: add test case

Author: zombieJ

docs/demo/virtual-columns.md

@@ -0,0 +1,8 @@
+---
+title: Virtual Columns
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/virtual-columns.tsx"></code>

docs/examples/fixedColumns.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import type { ColumnType } from 'rc-table';
 import Table from 'rc-table';
-import { ColumnType } from 'rc-table/lib/interface';
-import './assets/index.less';
+import React from 'react';
+import '../../assets/index.less';
 
 interface RecordType {
   a: string;

docs/examples/virtual-columns.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import '../../assets/index.less';
+import { VirtualTable } from '../../src';
+import type { ColumnsType } from '../../src/interface';
+
+interface RecordType {
+  a: string;
+  b?: string;
+  c?: string;
+}
+
+const columns1: ColumnsType = [
+  { title: 'title1', dataIndex: 'a', width: 100 },
+  { title: 'title2', dataIndex: 'b', width: 100 },
+  {
+    title: 'title13',
+    dataIndex: 'c',
+  },
+];
+
+const columns2: ColumnsType = [
+  { title: 'title1', dataIndex: 'a', width: 100 },
+  { title: 'title2', dataIndex: 'b', width: 100 },
+];
+
+const columns3: ColumnsType = [
+  { title: 'title1', dataIndex: 'a', width: 500 },
+  { title: 'title2', dataIndex: 'b', width: 500 },
+];
+
+const data: RecordType[] = new Array(4 * 10000).fill(null).map((_, index) => ({
+  a: `a${index}`,
+  b: `b${index}`,
+  c: `c${index}`,
+}));
+
+const Demo = () => {
+  const [columns, setColumns] = React.useState(columns1);
+
+  return (
+    <div style={{ width: 800, padding: `0 64px` }}>
+      <label>
+        <input type="radio" checked={columns === columns1} onChange={() => setColumns(columns1)} />
+        Fill Rest
+      </label>
+      <label>
+        <input type="radio" checked={columns === columns2} onChange={() => setColumns(columns2)} />
+        Stretch
+      </label>
+      <label>
+        <input type="radio" checked={columns === columns3} onChange={() => setColumns(columns3)} />
+        Over Size
+      </label>
+
+      <VirtualTable
+        getContainerWidth={(_, w) => w - 1}
+        columns={columns}
+        scroll={{ y: 200 }}
+        data={data}
+        rowKey="a"
+      />
+    </div>
+  );
+};
+
+export default Demo;

src/hooks/useColumns/useWidthColumns.tsx

@@ -38,7 +38,8 @@ export default function useWidthColumns(
       });
 
       // Fill width
-      let restWidth = Math.max(scrollWidth - totalWidth, missWidthCount);
+      const maxFitWidth = Math.max(scrollWidth, clientWidth);
+      let restWidth = Math.max(maxFitWidth - totalWidth, missWidthCount);
       let restCount = missWidthCount;
       const avgWidth = restWidth / missWidthCount;
 
@@ -67,8 +68,6 @@ 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 < maxFitWidth) {

src/index.ts

@@ -1,6 +1,6 @@
 import { EXPAND_COLUMN, INTERNAL_HOOKS } from './constant';
 import { FooterComponents as Summary } from './Footer';
-import type { Reference } from './interface';
+import type { ColumnType, Reference } from './interface';
 import Column from './sugar/Column';
 import ColumnGroup from './sugar/ColumnGroup';
 import type { TableProps } from './Table';
@@ -22,6 +22,7 @@ export {
   genVirtualTable,
   type VirtualTableProps,
   type Reference,
+  type ColumnType,
 };
 
 export default Table;

tests/Virtual.spec.tsx

@@ -323,4 +323,77 @@ describe('Table.Virtual', () => {
       index: 99,
     });
   });
+
+  describe('auto width', () => {
+    async function prepareTable(columns: any[]) {
+      const { container } = getTable({
+        getContainerWidth: () => 300,
+        columns: columns,
+      });
+
+      resize(container.querySelector('.rc-table')!);
+      await waitFakeTimer();
+
+      return container;
+    }
+
+    it('fill rest', async () => {
+      const container = await prepareTable([
+        {
+          dataIndex: 'name',
+          width: 100,
+        },
+        {
+          dataIndex: 'age',
+        },
+      ]);
+
+      expect(container.querySelectorAll('col')[0]).toHaveStyle({
+        width: '100px',
+      });
+      expect(container.querySelectorAll('col')[1]).toHaveStyle({
+        width: '200px',
+      });
+    });
+
+    it('stretch', async () => {
+      const container = await prepareTable([
+        {
+          dataIndex: 'name',
+          width: 100,
+        },
+        {
+          dataIndex: 'age',
+          width: 100,
+        },
+      ]);
+
+      expect(container.querySelectorAll('col')[0]).toHaveStyle({
+        width: '150px',
+      });
+      expect(container.querySelectorAll('col')[1]).toHaveStyle({
+        width: '150px',
+      });
+    });
+
+    it('exceed', async () => {
+      const container = await prepareTable([
+        {
+          dataIndex: 'name',
+          width: 500,
+        },
+        {
+          dataIndex: 'age',
+          width: 600,
+        },
+      ]);
+
+      expect(container.querySelectorAll('col')[0]).toHaveStyle({
+        width: '500px',
+      });
+      expect(container.querySelectorAll('col')[1]).toHaveStyle({
+        width: '600px',
+      });
+    });
+  });
 });