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(