example for #212

AllenFang · Jan 15, 2016 · 64c24eb · 64c24eb
1 parent 0d07a50
commit 64c24eb
Showing 1 changed file with 21 additions and 6 deletions.
diff --git a/examples/js/sort/sort-table.js b/examples/js/sort/sort-table.js
@@ -18,15 +18,30 @@ function addProducts(quantity) {
 }
 
 addProducts(5);
-
+var order = 'desc';
 export default class SortTable extends React.Component{
+
+  handleBtnClick = e => {
+    if(order === 'desc'){
+      this.refs.table.handleSort('asc', 'name');
+      order = 'asc';
+    } else {
+      this.refs.table.handleSort('desc', 'name');
+      order = 'desc';
+    }
+  }
+
   render(){
     return (
-      <BootstrapTable data={products}>
-          <TableHeaderColumn dataField="id" isKey={true} dataSort={true}>Product ID</TableHeaderColumn>
-          <TableHeaderColumn dataField="name" dataSort={true}>Product Name</TableHeaderColumn>
-          <TableHeaderColumn dataField="price">Product Price</TableHeaderColumn>
-      </BootstrapTable>
+      <div>
+        <p style={{color:'red'}}>You cam click header to sort or click following button to perform a sorting by expose API</p>
+        <button onClick={this.handleBtnClick}>Sort Product Name</button>
+        <BootstrapTable ref="table" data={products}>
+            <TableHeaderColumn dataField="id" isKey={true} dataSort={true}>Product ID</TableHeaderColumn>
+            <TableHeaderColumn dataField="name" dataSort={true}>Product Name</TableHeaderColumn>
+            <TableHeaderColumn dataField="price">Product Price</TableHeaderColumn>
+        </BootstrapTable>
+      </div>
     );
   }
 };