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 + + ); + } +};