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..8c250b393 --- /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[]
i === 0 ? { backgroundColor: '#eee' } : null} + expandedRowRender={record =>

extra: {record.a}

} + expandedRowStyle={(record, i) => i === 0 ? { backgroundColor: '#f3f3f3' } : null} + data={data} + className="table" + /> + , + document.getElementById('__react-content') +); diff --git a/src/Table.jsx b/src/Table.jsx index 1a4feff23..e38aef7f1 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, @@ -52,7 +54,9 @@ export default class Table extends React.Component { defaultExpandedRowKeys: [], rowKey: 'key', rowClassName: () => '', + rowStyle: () => {}, expandedRowClassName: () => '', + expandedRowStyle: () => {}, onExpand() {}, onExpandedRowsChange() {}, onRowClick() {}, @@ -252,7 +256,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') { @@ -282,6 +286,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`} @@ -301,8 +306,10 @@ export default class Table extends React.Component { expandedRowRender, expandRowByClick, rowClassName, + rowStyle, rowRef, expandedRowClassName, + expandedRowStyle, onRowClick, onRowDoubleClick, onRowContextMenu, @@ -329,6 +336,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()) { @@ -354,6 +362,7 @@ export default class Table extends React.Component { indentSize={props.indentSize} needIndentSpaced={needIndentSpaced} className={className} + style={style} record={record} expandIconAsCell={expandIconAsCell} onDestroy={this.onRowDestroy} @@ -384,8 +393,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), fixed + key, expandedRowContent, subVisible, expRowClassName, expRowStyle, fixed )); } if (childrenColumn) { diff --git a/src/TableRow.jsx b/src/TableRow.jsx index 673593722..222672e99 100644 --- a/src/TableRow.jsx +++ b/src/TableRow.jsx @@ -28,6 +28,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, @@ -193,7 +194,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'; } diff --git a/tests/__snapshots__/Table.expandRow.spec.js.snap b/tests/__snapshots__/Table.expandRow.spec.js.snap index 989e814d7..48a18de3a 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]} @@ -55,6 +56,7 @@ exports[`Table.expand controlled by expandedRowKeys 1`] = ` rowClassName={[Function]} rowKey="key" rowRef={[Function]} + rowStyle={[Function]} scroll={Object {}} showHeader={true} style={Object {}} @@ -571,6 +573,7 @@ exports[`Table.expand controlled by expandedRowKeys 2`] = ` ] } expandedRowRender={[Function]} + expandedRowStyle={[Function]} getBodyWrapper={[Function]} indentSize={15} onExpand={[Function]} @@ -584,6 +587,7 @@ exports[`Table.expand controlled by expandedRowKeys 2`] = ` rowClassName={[Function]} rowKey="key" rowRef={[Function]} + rowStyle={[Function]} scroll={Object {}} showHeader={true} style={Object {}} @@ -1188,6 +1192,7 @@ exports[`Table.expand expand row by click 1`] = ` expandIconColumnIndex={0} expandedRowClassName={[Function]} expandedRowRender={[Function]} + expandedRowStyle={[Function]} getBodyWrapper={[Function]} indentSize={15} onExpand={[Function]} @@ -1201,6 +1206,7 @@ exports[`Table.expand expand row by click 1`] = ` rowClassName={[Function]} rowKey="key" rowRef={[Function]} + rowStyle={[Function]} scroll={Object {}} showHeader={true} style={Object {}}