Merge pull request #233 from frontsideair/pagination2

Add example for externally managed selection state

examples/js/selection/demo.js

@@ -8,6 +8,7 @@ import SelectHookTable from './select-hook-table';
 import HideSelectionColumnTable from './hide-selection-col-table';
 import RowClickTable from './row-click-table';
 import OnlySelectedTable from './only-show-selected-table';
+import ExternallyManagedSelection from './externally-managed-selection';
 
 class Demo extends React.Component {
   render() {
@@ -94,6 +95,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">Externally Managed Selection State (max 2)</div>
+            <div className="panel-body">
+              <h5>Source in externally-managed-selection.js</h5>
+              <ExternallyManagedSelection />
+            </div>
+          </div>
+        </div>
       </div>
     );
   }

examples/js/selection/externally-managed-selection.js

@@ -0,0 +1,63 @@
+'use strict';
+import React from 'react';
+import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
+
+
+var products = [];
+
+function addProducts(quantity) { 
+  var startId = products.length;
+  for (var i = 0; i < quantity; i++) { 
+    var id = startId + i;
+    products.push({
+      id: id,
+      name: "Item name " + id,
+      price: 2100 + i 
+    });
+  } 
+}
+
+addProducts(100);
+
+export default class ExternallyManagedSelection extends React.Component{
+  constructor(props){
+    super(props);
+    this.state = { 
+      selected: []
+    };
+  } 
+
+  render(){
+    let onRowSelect = ({id}, isSelected) => { 
+      if (isSelected && this.state.selected.length !== 2) { 
+        this.setState({ selected: [...this.state.selected, id].sort() });
+      } 
+      else { 
+        this.setState({ selected: this.state.selected.filter(it => it !== id) });
+      } 
+      return false;
+    } 
+
+    var selectRowProp = { 
+      mode: "checkbox",
+      clickToSelect: true,
+      onSelect: onRowSelect,
+      selected: this.state.selected
+    };
+
+    var options = {
+      sizePerPageList: [5, 10, 15, 20],
+      sizePerPage: 10,
+      sortName: 'id',
+      sortOrder: 'desc'
+    }
+
+    return ( 
+      <BootstrapTable data={products} selectRow={selectRowProp} pagination={true} options={options}>
+        <TableHeaderColumn dataField="id" isKey={true}>Product ID</TableHeaderColumn>
+        <TableHeaderColumn dataField="name">Product Name</TableHeaderColumn>
+        <TableHeaderColumn dataField="price">Product Price</TableHeaderColumn>
+      </BootstrapTable>
+   );
+  } 
+};