diff --git a/README.md b/README.md
index 25773c0c5..4c9b9fdcd 100644
--- a/README.md
+++ b/README.md
@@ -115,6 +115,7 @@ React.render(
, 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(, 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) => 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.
diff --git a/docs/demo/click-summary-row.md b/docs/demo/click-summary-row.md
new file mode 100644
index 000000000..85ef862ed
--- /dev/null
+++ b/docs/demo/click-summary-row.md
@@ -0,0 +1,8 @@
+---
+title: click-summary-row
+nav:
+ title: Demo
+ path: /demo
+---
+
+
diff --git a/docs/examples/click-summary-row.tsx b/docs/examples/click-summary-row.tsx
new file mode 100644
index 000000000..e5b64c0e7
--- /dev/null
+++ b/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[] = [
+ { 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 (
+
+
(
+
+ {
+ e.stopPropagation();
+ alert('click summary row will trigger the click event');
+ }}
+ >
+
+ Summary
+ Content
+ Right
+
+
+ )}
+ />
+
+ );
+};
+
+export default Demo;
diff --git a/src/Footer/Row.tsx b/src/Footer/Row.tsx
index 0ca5457ea..541e0e553 100644
--- a/src/Footer/Row.tsx
+++ b/src/Footer/Row.tsx
@@ -4,6 +4,7 @@ export interface FooterRowProps {
children?: React.ReactNode;
className?: string;
style?: React.CSSProperties;
+ onClick?: (e?: React.MouseEvent) => void;
}
export default function FooterRow({ children, ...props }: FooterRowProps) {
diff --git a/tests/Summary.spec.tsx b/tests/Summary.spec.tsx
index d86c927f8..826a80c64 100644
--- a/tests/Summary.spec.tsx
+++ b/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(
+ (
+
+
+ Light
+
+ Bamboo
+
+ 112.5
+
+
+ )}
+ />,
+ );
+
+ const tr = wrapper.find('tfoot tr').first();
+ tr.simulate('click');
+ expect(onClick).toHaveBeenCalled();
+ });
+
describe('fixed summary', () => {
const getSummaryTable = (fixed: boolean | 'top' | 'bottom') =>
mount(