From 9cca4cb811ff51b1276ad06a962e6f1c44fb6390 Mon Sep 17 00:00:00 2001 From: John Date: Wed, 5 Jul 2017 18:52:57 +0800 Subject: [PATCH 1/3] add rowStyle and expandedRowStyle Properties --- README.md | 12 ++++++++++++ examples/style.html | 0 examples/style.js | 46 +++++++++++++++++++++++++++++++++++++++++++++ src/Table.jsx | 13 +++++++++++-- src/TableRow.jsx | 3 ++- 5 files changed, 71 insertions(+), 3 deletions(-) create mode 100644 examples/style.html create mode 100644 examples/style.js diff --git a/README.md b/README.md index 80ae553bb..0ff1c025f 100644 --- a/README.md +++ b/README.md @@ -122,6 +122,12 @@ React.render(, mountNode); + + + + + + @@ -164,6 +170,12 @@ React.render(
get row's className
rowStyleFunction(record, index, indent):objectget row's style
rowRef Function(record, index, indent):string
, mountNode); + + + + + + diff --git a/examples/style.html b/examples/style.html new file mode 100644 index 000000000..e69de29bb diff --git a/examples/style.js b/examples/style.js new file mode 100644 index 000000000..b01242cf2 --- /dev/null +++ b/examples/style.js @@ -0,0 +1,46 @@ +/* eslint-disable no-console,func-names,react/no-multi-comp */ +import React from 'react'; +import ReactDOM from 'react-dom'; +import Table from 'rc-table'; +import 'rc-table/assets/index.less'; + +const columns = [ + { title: 'title1', dataIndex: 'a', + className: 'a', + key: 'a', width: 100 }, + { id: '123', title: 'title2', dataIndex: 'b', + className: 'b', + key: 'b', width: 100 }, + { title: 'title3', dataIndex: 'c', + className: 'c', + key: 'c', width: 200 }, + { + title: 'Operations', dataIndex: '', + className: 'd', + key: 'd', render() { + return Operations; + }, + }, +]; + +const data = [ + { a: '123', key: '1' }, + { a: 'cdd', b: 'edd', key: '2' }, + { a: '1333', c: 'eee', d: 2, key: '3' }, +]; + +ReactDOM.render( +
+

rowStyle

+
get expanded row's className
expandedRowStyleFunction(recode, index, indent):objectget expanded row's style
data Object[]
(index == 0 ? { backgroundColor: '#eee' } : null)} + expandedRowRender={record =>

extra: {record.a}

} + expandedRowStyle={(record, index, indent) => (index == 0 ? { backgroundColor: '#f3f3f3' } : null)} + data={data} + className="table" + /> + , + document.getElementById('__react-content') +); diff --git a/src/Table.jsx b/src/Table.jsx index 3ae08585f..5a5ac54b6 100644 --- a/src/Table.jsx +++ b/src/Table.jsx @@ -23,7 +23,9 @@ export default class Table extends React.Component { style: PropTypes.object, rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), rowClassName: PropTypes.func, + rowStyle: PropTypes.func, expandedRowClassName: PropTypes.func, + expandedRowStyle: PropTypes.func, childrenColumnName: PropTypes.string, onExpand: PropTypes.func, onExpandedRowsChange: PropTypes.func, @@ -49,7 +51,9 @@ export default class Table extends React.Component { defaultExpandedRowKeys: [], rowKey: 'key', rowClassName: () => '', + rowStyle: () => {}, expandedRowClassName: () => '', + expandedRowStyle: () => {}, onExpand() {}, onExpandedRowsChange() {}, onRowClick() {}, @@ -248,7 +252,7 @@ export default class Table extends React.Component { return rows.filter(row => row.length > 0); } - getExpandedRow(key, content, visible, className, fixed) { + getExpandedRow(key, content, visible, className, style, fixed) { const { prefixCls, expandIconAsCell } = this.props; let colCount; if (fixed === 'left') { @@ -278,6 +282,7 @@ export default class Table extends React.Component { columns={columns} visible={visible} className={className} + style={style} key={`${key}-extra-row`} rowKey={`${key}-extra-row`} prefixCls={`${prefixCls}-expanded-row`} @@ -297,8 +302,10 @@ export default class Table extends React.Component { expandedRowRender, expandRowByClick, rowClassName, + rowStyle, rowRef, expandedRowClassName, + expandedRowStyle, onRowClick, onRowDoubleClick, onRowMouseEnter, @@ -321,6 +328,7 @@ export default class Table extends React.Component { expandedRowContent = expandedRowRender(record, i, indent); } const className = rowClassName(record, i, indent); + const style = rowStyle(record, i, indent) const onHoverProps = {}; if (this.columnManager.isAnyColumnsFixed()) { @@ -346,6 +354,7 @@ export default class Table extends React.Component { indentSize={props.indentSize} needIndentSpaced={needIndentSpaced} className={className} + style={style} record={record} expandIconAsCell={expandIconAsCell} onDestroy={this.onRowDestroy} @@ -376,7 +385,7 @@ export default class Table extends React.Component { if (expandedRowContent && isRowExpanded) { rst.push(this.getExpandedRow( - key, expandedRowContent, subVisible, expandedRowClassName(record, i, indent), fixed + key, expandedRowContent, subVisible, expandedRowClassName(record, i, indent), expandedRowStyle(record, i, indent), fixed )); } if (childrenColumn) { diff --git a/src/TableRow.jsx b/src/TableRow.jsx index 52d4ca464..6e43cbc88 100644 --- a/src/TableRow.jsx +++ b/src/TableRow.jsx @@ -27,6 +27,7 @@ export default class TableRow extends React.Component { onExpand: PropTypes.func, needIndentSpaced: PropTypes.bool, className: PropTypes.string, + style: PropTypes.object, indent: PropTypes.number, indentSize: PropTypes.number, expandIconAsCell: PropTypes.bool, @@ -184,7 +185,7 @@ export default class TableRow extends React.Component { ); } const height = this.props.height || this.state.height; - const style = { height }; + const style = { ...this.props.style, height }; if (!visible) { style.display = 'none'; } From 977887f579a181a4c1363df55fb237970d29233c Mon Sep 17 00:00:00 2001 From: John Date: Wed, 5 Jul 2017 18:53:57 +0800 Subject: [PATCH 2/3] fix lint error --- examples/style.js | 4 ++-- src/Table.jsx | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/examples/style.js b/examples/style.js index b01242cf2..8c250b393 100644 --- a/examples/style.js +++ b/examples/style.js @@ -35,9 +35,9 @@ ReactDOM.render(
(index == 0 ? { backgroundColor: '#eee' } : null)} + rowStyle={(record, i) => i === 0 ? { backgroundColor: '#eee' } : null} expandedRowRender={record =>

extra: {record.a}

} - expandedRowStyle={(record, index, indent) => (index == 0 ? { backgroundColor: '#f3f3f3' } : null)} + expandedRowStyle={(record, i) => i === 0 ? { backgroundColor: '#f3f3f3' } : null} data={data} className="table" /> diff --git a/src/Table.jsx b/src/Table.jsx index 5a5ac54b6..e6f49667f 100644 --- a/src/Table.jsx +++ b/src/Table.jsx @@ -328,7 +328,7 @@ export default class Table extends React.Component { expandedRowContent = expandedRowRender(record, i, indent); } const className = rowClassName(record, i, indent); - const style = rowStyle(record, i, indent) + const style = rowStyle(record, i, indent); const onHoverProps = {}; if (this.columnManager.isAnyColumnsFixed()) { @@ -384,8 +384,10 @@ export default class Table extends React.Component { const subVisible = visible && isRowExpanded; if (expandedRowContent && isRowExpanded) { + const expRowClassName = expandedRowClassName(record, i, indent); + const expRowStyle = expandedRowStyle(record, i, indent); rst.push(this.getExpandedRow( - key, expandedRowContent, subVisible, expandedRowClassName(record, i, indent), expandedRowStyle(record, i, indent), fixed + key, expandedRowContent, subVisible, expRowClassName, expRowStyle, fixed )); } if (childrenColumn) { From 8f04a8c8031da2415416ada7a01f363815a9a889 Mon Sep 17 00:00:00 2001 From: John Date: Wed, 5 Jul 2017 21:19:21 +0800 Subject: [PATCH 3/3] update tests --- tests/__snapshots__/Table.expandRow.spec.js.snap | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/tests/__snapshots__/Table.expandRow.spec.js.snap b/tests/__snapshots__/Table.expandRow.spec.js.snap index 35a042735..353f3b64d 100644 --- a/tests/__snapshots__/Table.expandRow.spec.js.snap +++ b/tests/__snapshots__/Table.expandRow.spec.js.snap @@ -42,6 +42,7 @@ exports[`Table.expand controlled by expandedRowKeys 1`] = ` ] } expandedRowRender={[Function]} + expandedRowStyle={[Function]} getBodyWrapper={[Function]} indentSize={15} onExpand={[Function]} @@ -54,6 +55,7 @@ exports[`Table.expand controlled by expandedRowKeys 1`] = ` rowClassName={[Function]} rowKey="key" rowRef={[Function]} + rowStyle={[Function]} scroll={Object {}} showHeader={true} style={Object {}} @@ -564,6 +566,7 @@ exports[`Table.expand controlled by expandedRowKeys 2`] = ` ] } expandedRowRender={[Function]} + expandedRowStyle={[Function]} getBodyWrapper={[Function]} indentSize={15} onExpand={[Function]} @@ -576,6 +579,7 @@ exports[`Table.expand controlled by expandedRowKeys 2`] = ` rowClassName={[Function]} rowKey="key" rowRef={[Function]} + rowStyle={[Function]} scroll={Object {}} showHeader={true} style={Object {}} @@ -1174,6 +1178,7 @@ exports[`Table.expand expand row by click 1`] = ` expandIconColumnIndex={0} expandedRowClassName={[Function]} expandedRowRender={[Function]} + expandedRowStyle={[Function]} getBodyWrapper={[Function]} indentSize={15} onExpand={[Function]} @@ -1186,6 +1191,7 @@ exports[`Table.expand expand row by click 1`] = ` rowClassName={[Function]} rowKey="key" rowRef={[Function]} + rowStyle={[Function]} scroll={Object {}} showHeader={true} style={Object {}}