feat: Support virtual Table

assets/index.less

@@ -1,3 +1,5 @@
+@import 'virtual.less';
+
 @tablePrefixCls: rc-table;
 @text-color: #666;
 @font-size-base: 12px;
@@ -55,9 +57,11 @@
 
   // ================== Cell ==================
   &-cell {
+    background: #f4f4f4;
+
     &-fix-left,
     &-fix-right {
-      z-index: 1;
+      z-index: 2;
     }
 
     &-fix-right:last-child:not(&-fix-sticky) {
@@ -137,7 +141,7 @@
     }
 
     &&-row-hover {
-      background: rgba(255, 0, 0, 0.05);
+      background: #fff4f4;
     }
   }
 

assets/virtual.less

@@ -0,0 +1,23 @@
+@import (reference) 'index.less';
+
+.@{tablePrefixCls}-tbody-virtual {
+  * {
+    box-sizing: border-box;
+  }
+
+  .@{tablePrefixCls}-row {
+    display: flex;
+    width: 100%;
+    border-bottom: 1px solid @border-color;
+    border-left: 1px solid @border-color;
+  }
+
+  .@{tablePrefixCls}-cell {
+    flex: 1 0 auto;
+    padding: 8px 16px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    border-right: 1px solid @border-color;
+  }
+}

docs/demo/virtual.md

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

docs/examples/virtual.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import '../../assets/index.less';
+import type { ColumnsType } from '../../src/interface';
+import Table from '../../src/StaticTable';
+
+interface RecordType {
+  a: string;
+  b?: string;
+  c?: string;
+  d: number;
+  indexKey: string;
+}
+
+const columns: ColumnsType = [
+  { title: 'title1', dataIndex: 'a', key: 'a', width: 100, fixed: 'left' },
+  { title: 'title2', dataIndex: 'b', key: 'b', width: 100, fixed: 'left', ellipsis: true },
+  { title: 'title3', dataIndex: 'c', key: 'c' },
+  // { title: 'title4', dataIndex: 'b', key: 'd' },
+  // { title: 'title5', dataIndex: 'b', key: 'e' },
+  {
+    title: 'title4',
+    key: 'd',
+    children: [
+      // Children columns
+      { title: 'title4-1' },
+      { title: 'title4-2' },
+    ],
+  },
+  { title: 'title6', dataIndex: 'b', key: 'f' },
+  {
+    title: (
+      <div>
+        title7
+        <br />
+        <br />
+        <br />
+        Hello world!
+      </div>
+    ),
+    dataIndex: 'b',
+    key: 'g',
+  },
+  { title: 'title8', dataIndex: 'b' },
+  { title: 'title9', dataIndex: 'b', key: 'i' },
+  { title: 'title10', dataIndex: 'b', key: 'j' },
+  { title: 'title11', dataIndex: 'b', key: 'k', width: 50, fixed: 'right' },
+  { title: 'title12', dataIndex: 'b', key: 'l', width: 100, fixed: 'right' },
+];
+
+const data: RecordType[] = new Array(1000).fill(null).map((_, index) => ({
+  a: `a${index}`,
+  b: `b${index}`,
+  c: `c${index}`,
+  d: index,
+  indexKey: `${index}`,
+}));
+
+const Demo = () => {
+  const [scrollY, setScrollY] = React.useState(true);
+
+  return (
+    <div style={{ width: 800, padding: 64 }}>
+      <label>
+        <input type="checkbox" checked={scrollY} onChange={() => setScrollY(!scrollY)} />
+        Scroll Y
+      </label>
+      <Table
+        columns={columns}
+        // expandedRowRender={({ b, c }) => b || c}
+        scroll={{ x: 1200, y: scrollY ? 200 : null }}
+        data={data}
+        rowKey="indexKey"
+      />
+    </div>
+  );
+};
+
+export default Demo;

package.json

@@ -57,7 +57,8 @@
     "@rc-component/context": "^1.3.0",
     "classnames": "^2.2.5",
     "rc-resize-observer": "^1.1.0",
-    "rc-util": "^5.27.1"
+    "rc-util": "^5.27.1",
+    "rc-virtual-list": "^3.7.0"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.2",