add rowStyle and expandedRowStyle Properties

README.md

@@ -122,6 +122,12 @@ React.render(<Table columns={columns} data={data} />, mountNode);
       <td></td>
       <td>get row's className</td>
     </tr>
+    <tr>
+      <td>rowStyle</td>
+      <td>Function(record, index, indent):object</td>
+      <td></td>
+      <td>get row's style</td>
+    </tr>
     <tr>
       <td>rowRef</td>
       <td>Function(record, index, indent):string</td>
@@ -164,6 +170,12 @@ React.render(<Table columns={columns} data={data} />, mountNode);
       <td></td>
       <td>get expanded row's className</td>
     </tr>
+    <tr>
+      <td>expandedRowStyle</td>
+      <td>Function(recode, index, indent):object</td>
+      <td></td>
+      <td>get expanded row's style</td>
+    </tr>
     <tr>
       <td>data</td>
       <td>Object[]</td>

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 <a href="#">Operations</a>;
+    },
+  },
+];
+
+const data = [
+  { a: '123', key: '1' },
+  { a: 'cdd', b: 'edd', key: '2' },
+  { a: '1333', c: 'eee', d: 2, key: '3' },
+];
+
+ReactDOM.render(
+  <div>
+    <h2>rowStyle</h2>
+    <Table
+      columns={columns}
+      indentSize={30}
+      rowStyle={(record, i) => i === 0 ? { backgroundColor: '#eee' } : null}
+      expandedRowRender={record => <p>extra: {record.a}</p>}
+      expandedRowStyle={(record, i) => i === 0 ? { backgroundColor: '#f3f3f3' } : null}
+      data={data}
+      className="table"
+    />
+  </div>,
+  document.getElementById('__react-content')
+);

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) {

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';
     }

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 {}}