fix #212

src/BootstrapTable.js

@@ -75,6 +75,10 @@ class BootstrapTable extends React.Component {
 
   getTableData() {
      let result = [];
+
+     if(this.props.options.sortName && this.props.options.sortOrder)
+       this.store.sort(this.props.options.sortOrder, this.props.options.sortName);
+
      if (this.props.pagination) {
        let page, sizePerPage;
        if (this.store.isChangedPage()) {
@@ -121,6 +125,10 @@ class BootstrapTable extends React.Component {
                   (paginationDom ? paginationDom.getSizePerPage() : Const.SIZE_PER_PAGE_LIST[0]);
       // #125
       if(page > Math.ceil(nextProps.data.length / sizePerPage)) page = 1;
+      let sortInfo = this.store.getSortInfo();
+      let sortField = nextProps.options.sortName || (sortInfo ? sortInfo.sortField : undefined);
+      let sortOrder = nextProps.options.sortOrder || (sortInfo ? sortInfo.order : undefined);
+      if(sortField && sortOrder) this.store.sort(sortOrder, sortField);
       let data = this.store.page(page, sizePerPage).get();
       this.setState({
         data: data
@@ -184,7 +192,7 @@ class BootstrapTable extends React.Component {
       childrens = [this.props.children];
     }
     var columns = this.getColumnsDescription(this.props);
-
+    var sortInfo = this.store.getSortInfo();
     var pagination = this.renderPagination();
     var toolBar = this.renderToolBar();
     var tableFilter = this.renderTableFilter(columns);
@@ -197,8 +205,8 @@ class BootstrapTable extends React.Component {
             ref="header"
             rowSelectType={this.props.selectRow.mode}
             hideSelectColumn={this.props.selectRow.hideSelectColumn}
-            sortName={this.props.options.sortName}
-            sortOrder={this.props.options.sortOrder}
+            sortName={sortInfo ? sortInfo.sortField : undefined}
+            sortOrder={sortInfo ? sortInfo.order : undefined}
             onSort={this.handleSort.bind(this)}
             onSelectAllRow={this.handleSelectAllRow.bind(this)}
             bordered={this.props.bordered}
@@ -247,10 +255,6 @@ class BootstrapTable extends React.Component {
       this.props.options.onSortChange(sortField, order, this.props);
     }
 
-    if (this.isRemoteDataSource()) {
-      return;
-    }
-
     let result = this.store.sort(order, sortField).get();
     this.setState({
       data: result
@@ -701,7 +705,7 @@ BootstrapTable.defaultProps = {
   trClassName: '',
   options: {
     sortName: undefined,
-    sortOrder: Const.SORT_DESC,
+    sortOrder: undefined,
     afterTableComplete: undefined,
     afterDeleteRow: undefined,
     afterInsertRow: undefined,

src/TableHeader.js

@@ -24,19 +24,17 @@ class TableHeader extends React.Component{
     this.selectRowColumnWidth = null;
   }
 
-  clearSortCaret(order, sortField){
+  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]);
       }
     }
-    this.props.onSort(order, sortField);
   }
 
-  componentDidMount(){
-    //default sorting
+  componentDidUpdate(){
     if(this.props.sortName){
       this.clearSortCaret(this.props.sortOrder, this.props.sortName);
       var row = this.refs.header;
@@ -92,11 +90,11 @@ class TableHeader extends React.Component{
     if(Array.isArray(this.props.children)){
       for(let i=0;i<this.props.children.length;i++){
         this.props.children[i] =
-          React.cloneElement(this.props.children[i], {key: i, clearSortCaret: this.clearSortCaret.bind(this)});
+          React.cloneElement(this.props.children[i], {key: i, onSort: this.props.onSort});
       }
     } else {
       this.props.children =
-        React.cloneElement(this.props.children, {key: 0, clearSortCaret: this.clearSortCaret.bind(this)});
+        React.cloneElement(this.props.children, {key: 0, onSort: this.props.onSort});
     }
   }
 

src/TableHeaderColumn.js

@@ -9,10 +9,8 @@ class TableHeaderColumn extends React.Component{
 
   handleColumnClick(e){
     if(!this.props.dataSort)return;
-    var dom = this.refs.innerDiv;
     this.order = this.order == Const.SORT_DESC?Const.SORT_ASC:Const.SORT_DESC;
-    this.props.clearSortCaret(this.order, this.props.dataField);
-    dom.appendChild(Util.renderSortCaret(this.order));
+    this.props.onSort(this.order, this.props.dataField);
   }
 
   componentDidMount(){
@@ -41,7 +39,7 @@ TableHeaderColumn.propTypes = {
   dataField: React.PropTypes.string,
   dataAlign: React.PropTypes.string,
   dataSort: React.PropTypes.bool,
-  clearSortCaret: React.PropTypes.func,
+  onSort: React.PropTypes.func,
   dataFormat: React.PropTypes.func,
   isKey: React.PropTypes.bool,
   editable: React.PropTypes.any,
@@ -59,7 +57,7 @@ TableHeaderColumn.defaultProps = {
   dataFormat: undefined,
   isKey: false,
   editable: true,
-  clearSortCaret: undefined,
+  onSort: undefined,
   hidden: false,
   className: "",
   width: null,

src/store/TableDataStore.js

@@ -73,6 +73,10 @@ export class TableDataStore {
     }
   }
 
+  getSortInfo() {
+    return this.sortObj;
+  }
+
   setSelectedRowKey(selectedRowKeys) {
     this.selected = selectedRowKeys;
   }