diff --git a/examples/js/selection/demo.js b/examples/js/selection/demo.js
index 5dd0bb30c..0de457922 100644
--- a/examples/js/selection/demo.js
+++ b/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 {
+
+
+
Externally Managed Selection State (max 2)
+
+
Source in externally-managed-selection.js
+
+
+
+
);
}
diff --git a/examples/js/selection/externally-managed-selection.js b/examples/js/selection/externally-managed-selection.js
new file mode 100644
index 000000000..975f67b6b
--- /dev/null
+++ b/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 (
+
+ Product ID
+ Product Name
+ Product Price
+
+ );
+ }
+};