feat: Support virtual Table (#1012)

* chore: init * chore: static of columns * feat: use virtual * refactor: extract func * chore: use internal hook * test: rm useless test * chore: support fixed * chore: scroll support * chore: scroll sync * chore: fixed pos * chore: fix style * chore: opt flatten * chore: part of it * chore: collect rows * chore: collect rowSpan * refactor: virtual cell * chore: rowSpan support * feat: rowSpan & colSpan * chore: row & col span * chore: update cal * fix: edge logic * chore: use fixed line * chore: use line align * chore: bump rc-virtual-list * chore: clean up * chore: refactor name * chore: use create immutable * chore: clean up * chore: bump rc-virtual-list * refactor: move useRowInfo in a single file * chore: tmp of columns * chore: fix sticky expand * refactor: move hooks * refactor: move hooks * chore: expanded support * chore: row expandable * chore: refactor name * refactor: row in * refactor: move rowClass in * chore: expanded info * chore: virtual * Update package.json Co-authored-by: Amumu <yoyo837@hotmail.com> * chore: update span logic * 7.33.0-alpha.0 * feat: support listItemHeight * 7.33.0-alpha.1 * chore: nest of cell in row * 7.33.0-alpha.2 * fix: not render if no data * 7.33.0-alpha.3 * chore: add empty style * 7.33.0-alpha.4 * test: update testcase --------- Co-authored-by: Amumu <yoyo837@hotmail.com>
react-component · Aug 25, 2023 · eac5ce8 · eac5ce8 · vercel · Aug 25, 2023
1 parent 6f538dc
commit eac5ce8
Show file tree

Hide file tree

Showing 28 changed files with 1,534 additions and 276 deletions.
diff --git a/assets/index.less b/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;
     }
   }
 

diff --git a/assets/virtual.less b/assets/virtual.less
@@ -0,0 +1,30 @@
+@import (reference) 'index.less';
+
+.@{tablePrefixCls}-tbody-virtual {
+  * {
+    box-sizing: border-box;
+  }
+
+  @border: 1px solid @border-color;
+  border-left: @border;
+
+  .@{tablePrefixCls}-row {
+    display: flex;
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  .@{tablePrefixCls}-row-extra {
+    .@{tablePrefixCls}-cell {
+      background: rgba(200, 200, 255) !important;
+    }
+  }
+
+  .@{tablePrefixCls}-cell {
+    flex: 0 0 var(--virtual-width);
+    width: var(--virtual-width);
+    padding: 8px 16px;
+    border-right: @border;
+    border-bottom: @border;
+  }
+}
diff --git a/docs/demo/virtual.md b/docs/demo/virtual.md
@@ -0,0 +1,8 @@
+---
+title: Virtual
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/virtual.tsx"></code>
diff --git a/docs/examples/virtual.tsx b/docs/examples/virtual.tsx
@@ -0,0 +1,217 @@
+import React from 'react';
+import '../../assets/index.less';
+import type { ColumnsType } from '../../src/interface';
+import { VirtualTable } from '../../src';
+
+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',
+    onCell: (_, index) => {
+      if (index % 4 === 0) {
+        return {
+          rowSpan: 3,
+        };
+      }
+
+      if (index % 4 === 3) {
+        return {
+          rowSpan: 1,
+          colSpan: 3,
+        };
+      }
+
+      return {
+        rowSpan: 0,
+      };
+    },
+  },
+  {
+    title: 'title4',
+    key: 'd',
+    children: [
+      // Children columns
+      {
+        title: 'title4-1',
+        dataIndex: 'b',
+        onCell: (_, index) => {
+          if (index % 4 === 0) {
+            return {
+              colSpan: 3,
+            };
+          }
+
+          if (index % 4 === 3) {
+            return {
+              colSpan: 0,
+            };
+          }
+        },
+      },
+      {
+        title: 'title4-2',
+        dataIndex: 'b',
+        onCell: (_, index) => {
+          if (index % 4 === 0 || index % 4 === 3) {
+            return {
+              colSpan: 0,
+            };
+          }
+        },
+      },
+    ],
+  },
+  {
+    title: 'title6',
+    dataIndex: 'b',
+    key: 'f',
+    onCell: (_, index) => {
+      if (index % 4 === 0) {
+        return {
+          rowSpan: 0,
+          colSpan: 0,
+        };
+      }
+
+      if (index % 4 === 1) {
+        return {
+          rowSpan: 3,
+        };
+      }
+
+      return {
+        rowSpan: 0,
+      };
+    },
+  },
+  {
+    title: (
+      <div>
+        title7
+        <br />
+        <br />
+        <br />
+        Hello world!
+      </div>
+    ),
+    dataIndex: 'bk',
+    key: 'g',
+  },
+  {
+    title: 'title8',
+    dataIndex: 'b',
+    onCell: (_, index) => {
+      if (index % 2 === 0) {
+        return {
+          rowSpan: 2,
+          colSpan: 2,
+        };
+      }
+
+      return {
+        rowSpan: 0,
+      };
+    },
+  },
+  {
+    title: 'title9 i',
+    dataIndex: 'b',
+    key: 'i',
+    onCell: () => ({
+      colSpan: 0,
+    }),
+  },
+  { title: 'title10', dataIndex: 'b', key: 'j' },
+  {
+    title: 'title11',
+    dataIndex: 'b',
+    key: 'k',
+    width: 50,
+    fixed: 'right',
+    onCell: (_, index) => {
+      return {
+        rowSpan: index % 2 === 0 ? 2 : 0,
+        // colSpan: 2,
+      };
+    },
+  },
+  {
+    title: 'title12',
+    dataIndex: 'b',
+    key: 'l',
+    width: 100,
+    fixed: 'right',
+    onCell: () => {
+      return {
+        // colSpan: 0,
+      };
+    },
+  },
+];
+
+export function cleanOnCell(cols: any = []) {
+  cols.forEach(col => {
+    delete (col as any).onCell;
+
+    cleanOnCell((col as any).children);
+  });
+}
+cleanOnCell(columns);
+
+const data: RecordType[] = new Array(4 * 10000).fill(null).map((_, index) => ({
+  a: `a${index}`,
+  b: `b${index}`,
+  c: `c${index}`,
+  d: index,
+  bk: <strong>Hello</strong>,
+  indexKey: `${index}`,
+  // children: [
+  //   {
+  //     indexKey: `${index}-1`,
+  //   },
+  //   {
+  //     indexKey: `${index}-2`,
+  //   },
+  // ],
+}));
+
+const Demo = () => {
+  const [scrollY, setScrollY] = React.useState(true);
+
+  return (
+    <div style={{ width: 800, padding: `0 64px` }}>
+      <label>
+        <input type="checkbox" checked={scrollY} onChange={() => setScrollY(!scrollY)} />
+        Scroll Y
+      </label>
+      <VirtualTable
+        columns={columns}
+        // expandedRowRender={({ b, c }) => b || c}
+        scroll={{ x: 1200, y: scrollY ? 200 : null }}
+        data={data}
+        // data={[]}
+        rowKey="indexKey"
+        expandable={{
+          expandedRowRender: () => 2333,
+          columnWidth: 60,
+          expandedRowClassName: () => 'good-one',
+        }}
+        // onRow={() => ({ className: 'rowed' })}
+        rowClassName="nice-try"
+      />
+    </div>
+  );
+};
+
+export default Demo;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-table",
-  "version": "7.32.3",
+  "version": "7.33.0-alpha.4",
   "description": "table ui component for react",
   "engines": {
     "node": ">=8.x"
@@ -42,7 +42,7 @@
     "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
     "test": "vitest",
     "coverage": "vitest run --coverage",
-    "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
+    "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish --branch static-table",
     "lint": "eslint src/ --ext .tsx,.ts",
     "lint:tsc": "tsc -p tsconfig.json --noEmit",
     "now-build": "npm run docs:build",
@@ -54,10 +54,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.10.1",
-    "@rc-component/context": "^1.3.0",
+    "@rc-component/context": "^1.4.0",
     "classnames": "^2.2.5",
     "rc-resize-observer": "^1.1.0",
-    "rc-util": "^5.27.1"
+    "rc-util": "^5.36.0",
+    "rc-virtual-list": "^3.10.4"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.2",