From c84874e8e2aa37889c1170813231e18ad7dc494d Mon Sep 17 00:00:00 2001
From: zhujun24 <zhujun87654321@gmail.com>
Date: Tue, 8 Sep 2015 17:44:05 +0800
Subject: [PATCH 1/3] separate expand icon

---
 src/Table.jsx    | 42 ++++++++++++++++++++++++++++++++++--------
 src/TableRow.jsx | 26 +++++++++++++++-----------
 2 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/src/Table.jsx b/src/Table.jsx
index d7e27881a..e34818d5a 100644
--- a/src/Table.jsx
+++ b/src/Table.jsx
@@ -58,7 +58,33 @@ class Table extends React.Component {
     return info[0] && info[0].expanded;
   }
 
+  getRowsIsExpand(data) {
+    var props = this.props;
+    var childrenColumnName = props.childrenColumnName;
+    var expandedRowRender = props.expandedRowRender;
+    for (var i = 0; i < data.length; i++) {
+      var record = data[i];
+      var childrenColumn = record[childrenColumnName];
+      var expandedRowContent;
+      if (expandedRowRender) {
+        expandedRowContent = expandedRowRender(record, i);
+      }
+      if (childrenColumn || expandedRowContent) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   getThs() {
+    if (this.getRowsIsExpand(this.state.data)) {
+      this.props.columns.unshift({
+        title: '',
+        dataIndex: '',
+        key: '',
+        width: 100
+      });
+    }
     return this.props.columns.map((c)=> {
       return <th key={c.key} className={c.className || ''}>{c.title}</th>;
     });
@@ -71,7 +97,7 @@ class Table extends React.Component {
     }
     return <tr key={key} style={{display: visible ? '' : 'none'}} className={`${prefixCls}-expanded-row ${className}`}>
       <td colSpan={this.props.columns.length}>
-      {content}
+        {content}
       </td>
     </tr>;
   }
@@ -142,14 +168,14 @@ class Table extends React.Component {
     }
     var headerTable;
     var thead = <thead className={`${prefixCls}-thead`}>
-      <tr>
-        {columns}
-      </tr>
+    <tr>
+      {columns}
+    </tr>
     </thead>;
     if (props.useFixedHeader) {
       headerTable = <div className={`${prefixCls}-header`}>
         <table>
-            {this.getColGroup()}
+          {this.getColGroup()}
           {thead}
         </table>
       </div>;
@@ -157,11 +183,11 @@ class Table extends React.Component {
     }
     return (
       <div className={className} style={props.style}>
-      {headerTable}
+        {headerTable}
         <div className={`${prefixCls}-body`} style={props.bodyStyle}>
           <table>
-          {this.getColGroup()}
-          {thead}
+            {this.getColGroup()}
+            {thead}
             <tbody className={`${prefixCls}-tbody`}>
             {rows}
             </tbody>
diff --git a/src/TableRow.jsx b/src/TableRow.jsx
index ae9f93caf..18b018f89 100644
--- a/src/TableRow.jsx
+++ b/src/TableRow.jsx
@@ -15,7 +15,18 @@ class TableRow extends React.Component {
     var index = props.index;
     var cells = [];
     var expanded = props.expanded;
-    for (var i = 0; i < columns.length; i++) {
+    var expandable = props.expandable;
+
+    if (expandable) {
+      cells.push(<td>
+        {<span
+          className={`${prefixCls}-expand-icon ${prefixCls}-${expanded ? 'expanded' : 'collapsed'}`}
+          onClick={props.onExpand.bind(null, !expanded, record)}
+          ></span>}
+      </td>);
+    }
+
+    for (var i = expandable ? 1 : 0; i < columns.length; i++) {
       var col = columns[i];
       var colClassName = col.className || '';
       var render = col.render;
@@ -23,19 +34,12 @@ class TableRow extends React.Component {
       if (render) {
         text = render(text, record, index);
       }
-      var expandIcon = null;
-      if (props.expandable && i === 0) {
-        expandIcon = <span
-          className={`${prefixCls}-expand-icon ${prefixCls}-${expanded ? 'expanded' : 'collapsed'}`}
-          onClick={props.onExpand.bind(null, !expanded, record)}
-        ></span>;
-      }
       cells.push(<td key={col.key} className={`${colClassName}`}>
-      {expandIcon}
-      {text}
+        {text}
       </td>);
     }
-    return (<tr className={`${prefixCls} ${props.className}`} style={{display: props.visible ? '' : 'none'}}>{cells}</tr>);
+    return (
+      <tr className={`${prefixCls} ${props.className}`} style={{display: props.visible ? '' : 'none'}}>{cells}</tr>);
   }
 }
 

From f819e0ddbeeecfc47199a71682698a29f5e4ec18 Mon Sep 17 00:00:00 2001
From: zhujun24 <zhujun87654321@gmail.com>
Date: Wed, 9 Sep 2015 14:54:32 +0800
Subject: [PATCH 2/3] add expandIconAsCell

---
 src/Table.jsx    | 36 +++++++++-------------------
 src/TableRow.jsx | 62 ++++++++++++++++++++++++++++++++----------------
 2 files changed, 53 insertions(+), 45 deletions(-)

diff --git a/src/Table.jsx b/src/Table.jsx
index e34818d5a..4eef17ab2 100644
--- a/src/Table.jsx
+++ b/src/Table.jsx
@@ -58,44 +58,28 @@ class Table extends React.Component {
     return info[0] && info[0].expanded;
   }
 
-  getRowsIsExpand(data) {
-    var props = this.props;
-    var childrenColumnName = props.childrenColumnName;
-    var expandedRowRender = props.expandedRowRender;
-    for (var i = 0; i < data.length; i++) {
-      var record = data[i];
-      var childrenColumn = record[childrenColumnName];
-      var expandedRowContent;
-      if (expandedRowRender) {
-        expandedRowContent = expandedRowRender(record, i);
-      }
-      if (childrenColumn || expandedRowContent) {
-        return true;
-      }
-    }
-    return false;
-  }
-
   getThs() {
-    if (this.getRowsIsExpand(this.state.data)) {
-      this.props.columns.unshift({
-        title: '',
-        dataIndex: '',
-        key: '',
-        width: 100
+    var expandIconAsCell = this.props.expandIconAsCell === false ? false : true;
+    var ths = [];
+    if (expandIconAsCell) {
+      ths.push({
+        title: ''
       });
     }
-    return this.props.columns.map((c)=> {
+    ths = ths.concat(this.props.columns);
+    return ths.map((c)=> {
       return <th key={c.key} className={c.className || ''}>{c.title}</th>;
     });
   }
 
   getExpandedRow(key, content, visible, className) {
+    var expandIconAsCell = this.props.expandIconAsCell === false ? false : true;
     var prefixCls = this.props.prefixCls;
     if (key) {
       key += '-extra-row';
     }
     return <tr key={key} style={{display: visible ? '' : 'none'}} className={`${prefixCls}-expanded-row ${className}`}>
+      {expandIconAsCell ? <td></td> : ''}
       <td colSpan={this.props.columns.length}>
         {content}
       </td>
@@ -107,6 +91,7 @@ class Table extends React.Component {
     var columns = props.columns;
     var childrenColumnName = props.childrenColumnName;
     var expandedRowRender = props.expandedRowRender;
+    var expandIconAsCell = props.expandIconAsCell;
     var rst = [];
     var keyFn = props.rowKey;
     var rowClassName = props.rowClassName;
@@ -123,6 +108,7 @@ class Table extends React.Component {
       rst.push(<TableRow
         className={className}
         record={record}
+        expandIconAsCell={expandIconAsCell}
         onDestroy={this.handleRowDestroy}
         index={i}
         visible={visible}
diff --git a/src/TableRow.jsx b/src/TableRow.jsx
index 18b018f89..81bac74e0 100644
--- a/src/TableRow.jsx
+++ b/src/TableRow.jsx
@@ -8,29 +8,51 @@ class TableRow extends React.Component {
   }
 
   render() {
-    var props = this.props;
-    var prefixCls = props.prefixCls;
-    var columns = props.columns;
-    var record = props.record;
-    var index = props.index;
-    var cells = [];
-    var expanded = props.expanded;
-    var expandable = props.expandable;
+    let props = this.props;
+    let prefixCls = props.prefixCls;
+    let columns = props.columns;
+    let record = props.record;
+    let index = props.index;
+    let cells = [];
+    let expanded = props.expanded;
+    let expandable = props.expandable;
+    let expandIconAsCell = props.expandIconAsCell === false ? false : true;
 
-    if (expandable) {
-      cells.push(<td>
-        {<span
-          className={`${prefixCls}-expand-icon ${prefixCls}-${expanded ? 'expanded' : 'collapsed'}`}
-          onClick={props.onExpand.bind(null, !expanded, record)}
-          ></span>}
-      </td>);
+    if (expandIconAsCell) {
+      if (expandable) {
+        cells.push(<td>
+          {<span
+            className={`${prefixCls}-expand-icon ${prefixCls}-${expanded ? 'expanded' : 'collapsed'}`}
+            onClick={props.onExpand.bind(null, !expanded, record)}
+            ></span>}
+        </td>);
+      } else {
+        cells.push(<td></td>);
+      }
+      if (!columns[0].title) {
+        columns.shift();
+      }
+    } else {
+      let col = columns[0];
+      let text = record[col.dataIndex];
+      if (expandable) {
+        cells.push(<td>
+          {<span
+            className={`${prefixCls}-expand-icon ${prefixCls}-${expanded ? 'expanded' : 'collapsed'}`}
+            onClick={props.onExpand.bind(null, !expanded, record)}
+            ></span>}
+          {text}
+        </td>);
+      } else {
+        cells.push(<td>{text}</td>);
+      }
     }
 
-    for (var i = expandable ? 1 : 0; i < columns.length; i++) {
-      var col = columns[i];
-      var colClassName = col.className || '';
-      var render = col.render;
-      var text = record[col.dataIndex];
+    for (let i = expandIconAsCell ? 0 : 1; i < columns.length; i++) {
+      let col = columns[i];
+      let colClassName = col.className || '';
+      let render = col.render;
+      let text = record[col.dataIndex];
       if (render) {
         text = render(text, record, index);
       }

From d1f146992a4a81f04c7f649601f4c4fc63f343c1 Mon Sep 17 00:00:00 2001
From: zhujun24 <zhujun87654321@gmail.com>
Date: Wed, 9 Sep 2015 15:07:41 +0800
Subject: [PATCH 3/3] checks failed

---
 src/TableRow.jsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/TableRow.jsx b/src/TableRow.jsx
index 81bac74e0..a7b7a7efb 100644
--- a/src/TableRow.jsx
+++ b/src/TableRow.jsx
@@ -8,15 +8,15 @@ class TableRow extends React.Component {
   }
 
   render() {
-    let props = this.props;
-    let prefixCls = props.prefixCls;
-    let columns = props.columns;
-    let record = props.record;
-    let index = props.index;
-    let cells = [];
-    let expanded = props.expanded;
-    let expandable = props.expandable;
-    let expandIconAsCell = props.expandIconAsCell === false ? false : true;
+    var props = this.props;
+    var prefixCls = props.prefixCls;
+    var columns = props.columns;
+    var record = props.record;
+    var index = props.index;
+    var cells = [];
+    var expanded = props.expanded;
+    var expandable = props.expandable;
+    var expandIconAsCell = props.expandIconAsCell === false ? false : true;
 
     if (expandIconAsCell) {
       if (expandable) {
@@ -48,7 +48,7 @@ class TableRow extends React.Component {
       }
     }
 
-    for (let i = expandIconAsCell ? 0 : 1; i < columns.length; i++) {
+    for (var i = expandIconAsCell ? 0 : 1; i < columns.length; i++) {
       let col = columns[i];
       let colClassName = col.className || '';
       let render = col.render;