manage sort externally example

Author: AllenFang

examples/js/sort/demo.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import SortTable from './sort-table';
 import DefaultSortTable from './default-sort-table';
+import ExternalSort from './manage-sort-external-table';
 import CustomSortTable from './custom-sort-table';
 import CustomSortWithExtraDataTable from './custom-sort-with-extra-data-table';
 import ReusableCustomSortTable from './reusable-custom-sort-table';
@@ -31,6 +32,15 @@ class Demo extends React.Component {
             </div>
           </div>
         </div>
+        <div className='col-md-offset-1 col-md-8'>
+          <div className='panel panel-default'>
+            <div className='panel-heading'>Manage Sorting Externally Example</div>
+            <div className='panel-body'>
+              <h5>Source in /examples/js/sort/manage-sort-external-table.js</h5>
+              <ExternalSort />
+            </div>
+          </div>
+        </div>
         <div className='col-md-offset-1 col-md-8'>
           <div className='panel panel-default'>
             <div className='panel-heading'>Customize Table Sort Example</div>

examples/js/sort/manage-sort-external-table.js

@@ -0,0 +1,59 @@
+/* eslint max-len: 0 */
+/* eslint no-console: 0 */
+import React from 'react';
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+
+
+const products = [];
+
+function addProducts(quantity) {
+  const startId = products.length;
+  for (let i = 0; i < quantity; i++) {
+    const id = startId + i;
+    products.push({
+      id: id,
+      name: 'Item name ' + id,
+      price: 2100 + i
+    });
+  }
+}
+
+addProducts(5);
+
+export default class ExternalSort extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      sortName: undefined,
+      sortOrder: undefined
+    };
+    this.onSortChange = this.onSortChange.bind(this);
+  }
+
+  onSortChange(sortName, sortOrder) {
+    console.info('onSortChange', arguments);
+    this.setState({
+      sortName,
+      sortOrder
+    });
+  }
+
+  render() {
+    const options = {
+      sortName: this.state.sortName,
+      sortOrder: this.state.sortOrder,
+      onSortChange: this.onSortChange
+    };
+    return (
+      <div>
+        <p style={ { color: 'red' } }>sort: sortName={ this.state.sortName }, sortOrder={ this.state.sortOrder }</p>
+        <BootstrapTable data={ products } options={ options }>
+          <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>
+    );
+  }
+}