diff --git a/docs/row-selection.md b/docs/row-selection.md
index e50ef83..c877e6b 100644
--- a/docs/row-selection.md
+++ b/docs/row-selection.md
@@ -6,6 +6,7 @@
* [mode (**required**)](#mode)
## Optional
+* [selected](#selected)
* [style](#style)
* [classes)](#classes)
* [bgColor](#bgColor)
@@ -52,6 +53,16 @@ const selectRow = {
/>
```
+### selectRow.selected - [Array]
+`selectRow.selected` allow you have default selections on table.
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ selected: [1, 3] // should be a row keys array
+};
+```
+
### selectRow.style - [Object | Function]
`selectRow.style` allow you to have custom style on selected rows:
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/default-select.js b/packages/react-bootstrap-table2-example/examples/row-selection/default-select.js
new file mode 100644
index 0000000..d11a688
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/default-select.js
@@ -0,0 +1,59 @@
+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 selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ selected: [1, 3]
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ selected: [1, 3]
+};
+
+
+`;
+
+export default () => (
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 09bce47..b7444a7 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -77,6 +77,7 @@ import CellEditClassTable from 'examples/cell-edit/cell-edit-class-table';
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 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';
@@ -189,6 +190,7 @@ storiesOf('Row Selection', module)
.add('Single Selection', () => )
.add('Multiple Selection', () => )
.add('Click to Select', () => )
+ .add('Default Select', () => )
.add('Click to Select and Edit Cell', () => )
.add('Selection Style', () => )
.add('Selection Class', () => )
diff --git a/packages/react-bootstrap-table2/src/row-selection/wrapper.js b/packages/react-bootstrap-table2/src/row-selection/wrapper.js
index 442cb18..b8c79bd 100644
--- a/packages/react-bootstrap-table2/src/row-selection/wrapper.js
+++ b/packages/react-bootstrap-table2/src/row-selection/wrapper.js
@@ -1,3 +1,4 @@
+/* eslint no-param-reassign: 0 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
@@ -21,11 +22,21 @@ export default Base =>
super(props);
this.handleRowSelect = this.handleRowSelect.bind(this);
this.handleAllRowsSelect = this.handleAllRowsSelect.bind(this);
+ props.store.selected = this.props.selectRow.selected || [];
this.state = {
selectedRowKeys: props.store.selected
};
}
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.selectRow) {
+ this.store.selected = nextProps.selectRow.selected || [];
+ this.setState(() => ({
+ selectedRowKeys: this.store.selected
+ }));
+ }
+ }
+
/**
* row selection handler
* @param {String} rowKey - row key of what was selected.
diff --git a/packages/react-bootstrap-table2/test/row-selection/wrapper.test.js b/packages/react-bootstrap-table2/test/row-selection/wrapper.test.js
index fba2c67..278a54e 100644
--- a/packages/react-bootstrap-table2/test/row-selection/wrapper.test.js
+++ b/packages/react-bootstrap-table2/test/row-selection/wrapper.test.js
@@ -8,6 +8,7 @@ import wrapperFactory from '../../src/row-selection/wrapper';
describe('RowSelectionWrapper', () => {
let wrapper;
+ let selectRow;
const columns = [{
dataField: 'id',
@@ -25,10 +26,6 @@ describe('RowSelectionWrapper', () => {
name: 'B'
}];
- const selectRow = {
- mode: 'radio'
- };
-
const rowIndex = 1;
const keyField = 'id';
@@ -38,6 +35,9 @@ describe('RowSelectionWrapper', () => {
const RowSelectionWrapper = wrapperFactory(BootstrapTable);
beforeEach(() => {
+ selectRow = {
+ mode: 'radio'
+ };
wrapper = shallow(
{
expect(wrapper.find(BootstrapTable)).toBeDefined();
});
+ it('should have correct store.selected value', () => {
+ expect(store.selected).toEqual([]);
+ });
+
it('should have correct state', () => {
expect(wrapper.state().selectedRowKeys).toBeDefined();
expect(wrapper.state().selectedRowKeys.length).toEqual(0);
@@ -64,6 +68,30 @@ describe('RowSelectionWrapper', () => {
expect(wrapper.props().onAllRowsSelect).toBeDefined();
});
+ describe('when selectRow.selected is defiend', () => {
+ beforeEach(() => {
+ selectRow.mode = 'checkbox';
+ selectRow.selected = [1, 3];
+ wrapper = shallow(
+
+ );
+ });
+
+ it('should have correct store.selected value', () => {
+ expect(store.selected).toEqual(selectRow.selected);
+ });
+
+ it('should have correct state', () => {
+ expect(wrapper.state().selectedRowKeys).toEqual(selectRow.selected);
+ });
+ });
+
describe('when selectRow.mode is \'radio\'', () => {
const firstSelectedRow = data[0][keyField];
const secondSelectedRow = data[1][keyField];