fix #219

AllenFang · Jan 19, 2016 · ab43542 · ab43542
1 parent 6878e90
commit ab43542
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 30 deletions.
diff --git a/src/TableHeader.js b/src/TableHeader.js
@@ -24,30 +24,6 @@ class TableHeader extends React.Component{
     this.selectRowColumnWidth = null;
   }
 
-  clearSortCaret(order, sortField) {
-    var row = this.refs.header;
-    for(var i=0;i<row.childElementCount;i++){
-      var column = row.childNodes[i].childNodes[0];
-      if(column.getElementsByClassName("order").length > 0){
-        column.removeChild(column.getElementsByClassName("order")[0]);
-      }
-    }
-  }
-
-  componentDidUpdate(){
-    if(this.props.sortName){
-      this.clearSortCaret(this.props.sortOrder, this.props.sortName);
-      var row = this.refs.header;
-      for(var i=0;i<row.childElementCount;i++){
-        var column = row.childNodes[i].childNodes[0];
-        if(column.getAttribute('data-field') === this.props.sortName){
-          column.appendChild(Util.renderSortCaret(this.props.sortOrder));
-          break;
-        }
-      }
-    }
-  }
-
   render(){
     var containerClasses = classSet("table-header");
     var tableClasses = classSet("table", "table-hover", {
@@ -89,12 +65,17 @@ class TableHeader extends React.Component{
   _attachClearSortCaretFunc(){
     if(Array.isArray(this.props.children)){
       for(let i=0;i<this.props.children.length;i++){
+        const field = this.props.children[i].props.dataField;
+        const sort = field === this.props.sortName ? this.props.sortOrder : undefined;
         this.props.children[i] =
-          React.cloneElement(this.props.children[i], {key: i, onSort: this.props.onSort});
+          React.cloneElement(this.props.children[i],
+            { key: i, onSort: this.props.onSort, sort });
       }
     } else {
+      const field = this.props.children.props.dataField;
+      const sort = field === this.props.sortName ? this.props.sortOrder : undefined;
       this.props.children =
-        React.cloneElement(this.props.children, {key: 0, onSort: this.props.onSort});
+        React.cloneElement(this.props.children, {key: 0, onSort: this.props.onSort, sort});
     }
   }
 

diff --git a/src/TableHeaderColumn.js b/src/TableHeaderColumn.js
@@ -26,11 +26,15 @@ class TableHeaderColumn extends React.Component{
       maxWidth: width
     };
 
+    const sortCaret = this.props.sort ? Util.renderReactSortCaret(this.props.sort) : null;
+
     var classes = this.props.className+" "+(this.props.dataSort?"sort-column":"");
     return(
-      <th className={classes} style={thStyle}>
+      <th ref='header-col' className={classes} style={thStyle}>
         <div ref="innerDiv" className="th-inner table-header-column"
-          onClick={this.handleColumnClick.bind(this)}>{this.props.children}</div>
+          onClick={this.handleColumnClick.bind(this)}>
+          {this.props.children}{sortCaret}
+        </div>
       </th>
     )
   }
@@ -48,7 +52,8 @@ TableHeaderColumn.propTypes = {
   width: React.PropTypes.string,
   sortFunc: React.PropTypes.func,
   columnClassName: React.PropTypes.any,
-  filterFormatted: React.PropTypes.bool
+  filterFormatted: React.PropTypes.bool,
+  sort: React.PropTypes.string
 };
 
 TableHeaderColumn.defaultProps = {
@@ -63,7 +68,8 @@ TableHeaderColumn.defaultProps = {
   width: null,
   sortFunc: undefined,
   columnClassName: '',
-  filterFormatted: false
+  filterFormatted: false,
+  sort: undefined
 };
 
 export default TableHeaderColumn;