feat: add onClick prop in Table.Summary.Row (#985)

Author: Ylg12345

README.md

@@ -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 Ant Design's "Table" component is used to define the summary row of the table. The summary row is a special row that is usually used to display summary information of all rows in the table, such as total, average, etc. |
 
 ## Column Props
 
@@ -129,11 +130,30 @@ 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 |
+| onClick | (e?: React.MouseEvent<HTMLElement>) => void | - | The onClick attribute in Ant Design's 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.

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/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;

src/Footer/Row.tsx

@@ -4,6 +4,7 @@ export interface FooterRowProps {
   children?: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
+  onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
 }
 
 export default function FooterRow({ children, ...props }: FooterRowProps) {

tests/Summary.spec.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { mount } from 'enzyme';
+import React from 'react';
 import Table from '../src';
 
 describe('Table.Summary', () => {
@@ -53,6 +53,35 @@ describe('Table.Summary', () => {
     expect(wrapper.find('tfoot').render()).toMatchSnapshot();
   });
 
+  it('summary row click', async () => {
+    const onClick = jest.fn();
+    const wrapper = mount(
+      <Table
+        columns={[
+          { dataIndex: 'a', fixed: 'left', width: 10 },
+          { dataIndex: 'b', fixed: 'left', width: 20 },
+          { dataIndex: 'c', width: 30 },
+        ]}
+        data={[{ key: 1, a: 2, b: 3, c: 4 }]}
+        summary={() => (
+          <Table.Summary.Row onClick={onClick}>
+            <Table.Summary.Cell colSpan={2} index={0}>
+              Light
+            </Table.Summary.Cell>
+            <Table.Summary.Cell index={2}>Bamboo</Table.Summary.Cell>
+            <Table.Summary.Cell index={3} align="right">
+              112.5
+            </Table.Summary.Cell>
+          </Table.Summary.Row>
+        )}
+      />,
+    );
+
+    const tr = wrapper.find('tfoot tr').first();
+    tr.simulate('click');
+    expect(onClick).toHaveBeenCalled();
+  });
+
   describe('fixed summary', () => {
     const getSummaryTable = (fixed: boolean | 'top' | 'bottom') =>
       mount(