diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-management.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-management.js
new file mode 100644
index 0000000..e0466a3
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/selection-management.js
@@ -0,0 +1,144 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+class SelectionManagment extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { selected: [0, 1] };
+ }
+
+ handleBtnClick = () => {
+ if (!this.state.selected.includes(2)) {
+ this.setState(() => ({
+ selected: [...this.state.selected, 2]
+ }));
+ } else {
+ this.setState(() => ({
+ selected: this.state.selected.filter(x => x !== 2)
+ }));
+ }
+ }
+
+ handleOnSelect = (row, isSelect) => {
+ if (isSelect) {
+ this.setState(() => ({
+ selected: [...this.state.selected, row.id]
+ }));
+ } else {
+ this.setState(() => ({
+ selected: this.state.selected.filter(x => x !== row.id)
+ }));
+ }
+ }
+
+ handleOnSelectAll = (isSelect, rows) => {
+ const ids = rows.map(r => r.id);
+ if (isSelect) {
+ this.setState(() => ({
+ selected: ids
+ }));
+ } else {
+ this.setState(() => ({
+ selected: []
+ }));
+ }
+ }
+
+ render() {
+ const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ selected: this.state.selected,
+ onSelect: this.handleOnSelect,
+ onSelectAll: this.handleOnSelectAll
+ };
+ return (
+
+
+
+ { sourceCode }
+
+ );
+ }
+}
+`;
+
+export default class SelectionManagment extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { selected: [0, 1] };
+ }
+
+ handleBtnClick = () => {
+ if (!this.state.selected.includes(2)) {
+ this.setState(() => ({
+ selected: [...this.state.selected, 2]
+ }));
+ } else {
+ this.setState(() => ({
+ selected: this.state.selected.filter(x => x !== 2)
+ }));
+ }
+ }
+
+ handleOnSelect = (row, isSelect) => {
+ if (isSelect) {
+ this.setState(() => ({
+ selected: [...this.state.selected, row.id]
+ }));
+ } else {
+ this.setState(() => ({
+ selected: this.state.selected.filter(x => x !== row.id)
+ }));
+ }
+ }
+
+ handleOnSelectAll = (isSelect, rows) => {
+ const ids = rows.map(r => r.id);
+ if (isSelect) {
+ this.setState(() => ({
+ selected: ids
+ }));
+ } else {
+ this.setState(() => ({
+ selected: []
+ }));
+ }
+ }
+
+ render() {
+ const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ selected: this.state.selected,
+ onSelect: this.handleOnSelect,
+ onSelectAll: this.handleOnSelectAll
+ };
+ return (
+
+
+
+ { sourceCode }
+
+ );
+ }
+}
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index c16dc53..3f116f5 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -79,6 +79,7 @@ import SingleSelectionTable from 'examples/row-selection/single-selection';
import MultipleSelectionTable from 'examples/row-selection/multiple-selection';
import ClickToSelectTable from 'examples/row-selection/click-to-select';
import DefaultSelectTable from 'examples/row-selection/default-select';
+import SelectionManagement from 'examples/row-selection/selection-management';
import ClickToSelectWithCellEditTable from 'examples/row-selection/click-to-select-with-cell-edit';
import SelectionStyleTable from 'examples/row-selection/selection-style';
import SelectionClassTable from 'examples/row-selection/selection-class';
@@ -193,6 +194,7 @@ storiesOf('Row Selection', module)
.add('Multiple Selection', () => )
.add('Click to Select', () => )
.add('Default Select', () => )
+ .add('Selection Management', () => )
.add('Click to Select and Edit Cell', () => )
.add('Selection Style', () => )
.add('Selection Class', () => )