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);
|
get row's className |
+
+ rowStyle |
+ Function(record, index, indent):object |
+ |
+ get row's style |
+
rowRef |
Function(record, index, indent):string |
@@ -164,6 +170,12 @@ React.render(, mountNode);
|
get expanded row's className |
+
+ expandedRowStyle |
+ Function(recode, index, indent):object |
+ |
+ get expanded row's style |
+
data |
Object[] |
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
+
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 {}}