Merge branch 'master' into dependabot/npm_and_yarn/less-4.1.3

.fatherrc.ts

@@ -1,10 +1,5 @@
 import { defineConfig } from 'father';
 
 export default defineConfig({
-  platform: 'browser',
-  cjs: { output: 'lib' },
-  esm: {
-    output: 'es',
-    alias: { 'rc-util/lib': 'rc-util/es' },
-  },
-});
+  plugins: ['@rc-component/father-plugin'],
+});

.github/workflows/main.yml

@@ -108,6 +108,6 @@ jobs:
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
 
       - name: coverage
-        run: npm test -- --coverage && bash <(curl -s https://codecov.io/bash)
+        run: npm run coverage && bash <(curl -s https://codecov.io/bash)
 
     needs: setup

.gitignore

@@ -32,7 +32,7 @@ package-lock.json
 es/
 .storybook
 .doc
-!tests/__mocks__/rc-util/lib
+!__mocks__/rc-util/lib
 examples/debug.tsx
 .history
 ~*
@@ -42,4 +42,4 @@ examples/debug.tsx
 .umi-production
 .umi-test
 .env.local
-.dumi
+.dumi

.gitpod.yml

@@ -0,0 +1,11 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: npm install && npm run compile
+    command: npm run start
+
+

README.md

@@ -34,7 +34,7 @@ npm start
 
 ## Example
 
-https://table.react-component.now.sh/
+https://table-react-component.vercel.app/
 
 ## Usage
 
@@ -115,6 +115,7 @@ React.render(<Table columns={columns} data={data} />, mountNode);
 | columns | Object[] |  | The columns config of table, see table below |
 | components | Object |  | Override table elements, see [#171](https://github.com/react-component/table/pull/171) for more details |
 | sticky | boolean \| {offsetHeader?: number, offsetScroll?: number, getContainer?: () => Window \| HTMLElement } | false | stick header and scroll bar |
+| summary | (data: readonly RecordType[]) => React.ReactNode | - | `summary` attribute in `table` component is used to define the summary row. |
 
 ## Column Props
 
@@ -129,11 +130,29 @@ React.render(<Table columns={columns} data={data} />, mountNode);
 | fixed | String \| Boolean |  | this column will be fixed when table scroll horizontally: true or 'left' or 'right' |
 | align | String |  | specify how cell content is aligned |
 | ellipsis | Boolean |  | specify whether cell content be ellipsized |
-| rowScope | 'row' \| 'rowgroup' |  | 	Set scope attribute for all cells in this column |
+| rowScope | 'row' \| 'rowgroup' |  | Set scope attribute for all cells in this column |
 | onCell | Function(record, index) |  | Set custom props per each cell. |
 | onHeaderCell | Function(record) |  | Set custom props per each header cell. |
 | render | Function(value, row, index) |  | The render function of cell, has three params: the text of this cell, the record of this row, the index of this row, it's return an object:{ children: value, props: { colSpan: 1, rowSpan:1 } } ==> 'children' is the text of this cell, props is some setting of this cell, eg: 'colspan' set td colspan, 'rowspan' set td rowspan |
 
+## Summary Props
+
+### Table.Summary
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| key | String |  | key of this summary |
+| fixed | boolean \| 'top' \| 'bottom' | - | `true` fixes the summary row at the bottom of the table. `top` fixes the summary row at the top of the table, while `bottom` fixes it at the bottom. `undefined` or `false` makes the summary row scrollable along with the table. |
+
+### Table.Summary.Row
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| key | String |  | key of this summary |
+| className | String | - | className of this summary row |
+| style | React.CSSProperties | - | style of this summary row |
+| onClick | (e?: React.MouseEvent\<HTMLElement>) => void | - | The `onClick` attribute in `Table.Summary.Row` component can be used to set a click event handler for the summary row. |
+
 ## License
 
 rc-table is released under the MIT license.

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;
     }
   }
 
@@ -284,6 +288,13 @@
     border-bottom: 0;
   }
 
+  // ================= Caption ==================
+  &-caption {
+    padding: @cell-padding;
+    border-right: @border;
+    border-bottom: @border;
+  }
+
   // ================= Footer =================
   &-footer {
     padding: @cell-padding;

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;
+  }
+}

docs/demo/click-summary-row.md

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

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/demo/virtual.md

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

docs/examples/click-summary-row.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable no-console,func-names,react/no-multi-comp, no-nested-ternary */
+import type { ColumnType } from '@/interface';
+import Table from 'rc-table';
+import React from 'react';
+import '../../assets/index.less';
+
+interface RecordType {
+  a: string;
+  b?: string;
+  c?: string;
+  d: number;
+  key: string;
+}
+
+const columns: ColumnType<RecordType>[] = [
+  { title: 'title1', dataIndex: 'a', key: 'a' },
+  { title: 'title2', dataIndex: 'b', key: 'b' },
+  { title: 'title3', dataIndex: 'c', key: 'c' },
+  { title: 'title4', dataIndex: 'd', key: 'd' },
+];
+
+const data: RecordType[] = [
+  { a: 'cdd', b: 'edd12221', d: 3, key: '2' },
+  { a: '133', c: 'edd12221', d: 2, key: '3' },
+  { a: '133', c: 'edd12221', d: 2, key: '4' },
+];
+
+const Demo = () => {
+  return (
+    <div style={{ width: 800 }}>
+      <Table
+        columns={columns}
+        data={data}
+        summary={() => (
+          <Table.Summary>
+            <Table.Summary.Row
+              onClick={e => {
+                e.stopPropagation();
+                alert('click summary row will trigger the click event');
+              }}
+            >
+              <Table.Summary.Cell index={0} />
+              <Table.Summary.Cell index={1}>Summary</Table.Summary.Cell>
+              <Table.Summary.Cell index={3}>Content</Table.Summary.Cell>
+              <Table.Summary.Cell index={11}>Right</Table.Summary.Cell>
+            </Table.Summary.Row>
+          </Table.Summary>
+        )}
+      />
+    </div>
+  );
+};
+
+export default Demo;

docs/examples/colspan-rowspan.tsx

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

docs/examples/fixedColumns.tsx

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

docs/examples/fixedColumnsAndHeader.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import Table from 'rc-table';
 import '../../assets/index.less';
-import { ColumnsType } from '@/interface';
-import { useCheckbox } from './utils/useInput';
 
 const columns = [
   {

docs/examples/scrollY.tsx

@@ -1,5 +1,5 @@
+import Table, { type Reference } from 'rc-table';
 import React from 'react';
-import Table from 'rc-table';
 import '../../assets/index.less';
 
 const data = [];
@@ -12,51 +12,63 @@ for (let i = 0; i < 10; i += 1) {
   });
 }
 
-class Demo extends React.Component {
-  state = {
-    showBody: true,
-  };
+const Test = () => {
+  const tblRef = React.useRef<Reference>();
+  const [showBody, setShowBody] = React.useState(true);
 
-  toggleBody = () => {
-    this.setState(({ showBody }) => ({ showBody: !showBody }));
+  const toggleBody = () => {
+    setShowBody(!showBody);
   };
 
-  render() {
-    const { showBody } = this.state;
-    const columns = [
-      { title: 'title1', key: 'a', dataIndex: 'a', width: 100 },
-      { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
-      { title: 'title3', key: 'c', dataIndex: 'c', width: 200 },
-      {
-        title: (
-          <a onClick={this.toggleBody} href="#">
-            {this.state.showBody ? '隐藏' : '显示'}体
-          </a>
-        ),
-        key: 'x',
-        width: 200,
-        render() {
-          return <a href="#">Operations</a>;
-        },
+  const columns = [
+    { title: 'title1', key: 'a', dataIndex: 'a', width: 100 },
+    { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+    { title: 'title3', key: 'c', dataIndex: 'c', width: 200 },
+    {
+      title: (
+        <a onClick={toggleBody} href="#">
+          {showBody ? '隐藏' : '显示'}体
+        </a>
+      ),
+      key: 'x',
+      width: 200,
+      render() {
+        return <a href="#">Operations</a>;
       },
-    ];
-    return (
+    },
+  ];
+
+  return (
+    <div>
+      <h2>scroll body table</h2>
+      <button
+        onClick={() => {
+          tblRef.current?.scrollTo({
+            top: 9999,
+          });
+        }}
+      >
+        Scroll To End
+      </button>
+      <button
+        onClick={() => {
+          tblRef.current?.scrollTo({
+            key: 9,
+          });
+        }}
+      >
+        Scroll To key 9
+      </button>
       <Table
+        ref={tblRef}
         columns={columns}
         data={data}
         scroll={{ y: 300 }}
         rowKey={record => record.key}
-        onRow={(record, index) => ({ style: { backgroundColor: "red" } })}
+        onRow={(record, index) => ({ style: { backgroundColor: 'red' } })}
       />
-    );
-  }
-}
-
-const Test = () => (
-  <div>
-    <h2>scroll body table</h2>
-    <Demo />
-  </div>
-);
+    </div>
+  );
+};
 
 export default Test;