diff --git a/docs/row-selection.md b/docs/row-selection.md
index 6143295..9726ce2 100644
--- a/docs/row-selection.md
+++ b/docs/row-selection.md
@@ -11,6 +11,7 @@ The following are available properties in `selectRow`:
* [mode (**required**)](#mode)
* [style](#style)
* [classes)](#classes)
+* [bgColor](#bgColor)
* [nonSelectable)](#nonSelectable)
#### Optional
@@ -88,6 +89,27 @@ const selectRow = {
};
```
+## selectRow.bgColor - [String | Function]
+The backgroud color when row is selected
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ bgColor: 'red'
+};
+```
+
+There's also a more good way to custom it:
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ bgColor: (row, rowIndex) => {
+ return ....; // return a color code
+ }
+};
+```
+
## selectRow.nonSelectable - [Array]
This prop allow you to restrict some rows which can not be selected by user. `selectRow.nonSelectable` accept an rowkeys array.
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-bgcolor.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-bgcolor.js
new file mode 100644
index 0000000..a1dc2db
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/selection-bgcolor.js
@@ -0,0 +1,88 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table2';
+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 selectRow1 = {
+ mode: 'checkbox',
+ bgColor: '#00BFFF'
+};
+
+const selectRow2 = {
+ mode: 'checkbox',
+ bgColor: (row, rowIndex) => (rowIndex > 1 ? '#00BFFF' : '#00FFFF')
+};
+
+const sourceCode1 = `\
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ bgColor: '#00BFFF'
+};
+
+
+`;
+
+const sourceCode2 = `\
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ bgColor: (row, rowIndex) => (rowIndex > 1 ? '#00BFFF' : '#00FFFF')
+};
+
+
+`;
+
+export default () => (
+
+
+ { sourceCode1 }
+
+ { sourceCode2 }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 95192e0..7be418f 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -56,6 +56,7 @@ import MultipleSelectionTable from 'examples/row-selection/multiple-selection';
import SelectionStyleTable from 'examples/row-selection/selection-style';
import SelectionClassTable from 'examples/row-selection/selection-class';
import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
+import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor';
// css style
import 'bootstrap/dist/css/bootstrap.min.css';
@@ -120,4 +121,5 @@ storiesOf('Row Selection', module)
.add('Multiple Selection', () => )
.add('Selection Style', () => )
.add('Selection Class', () => )
+ .add('Selection Background Color', () => )
.add('Not Selectabled Rows', () => );
diff --git a/packages/react-bootstrap-table2/src/body.js b/packages/react-bootstrap-table2/src/body.js
index fe0bcaa..18ccef8 100644
--- a/packages/react-bootstrap-table2/src/body.js
+++ b/packages/react-bootstrap-table2/src/body.js
@@ -24,7 +24,8 @@ const Body = (props) => {
const {
style: selectedStyle,
- classes: selectedClasses
+ classes: selectedClasses,
+ bgColor
} = selectRow;
let content;
@@ -42,11 +43,16 @@ const Body = (props) => {
? selectedRowKeys.includes(key)
: null;
- let style = {};
- let classes = '';
+ let style;
+ let classes;
if (selected) {
style = _.isFunction(selectedStyle) ? selectedStyle(row, index) : selectedStyle;
classes = _.isFunction(selectedClasses) ? selectedClasses(row, index) : selectedClasses;
+
+ if (bgColor) {
+ style = style || {};
+ style.backgroundColor = _.isFunction(bgColor) ? bgColor(row, index) : bgColor;
+ }
}
return (
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index f336f04..c90823a 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -130,7 +130,8 @@ BootstrapTable.propTypes = {
mode: PropTypes.oneOf([Const.ROW_SELECT_SINGLE, Const.ROW_SELECT_MULTIPLE]).isRequired,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
classes: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
- nonSelectable: PropTypes.array
+ nonSelectable: PropTypes.array,
+ bgColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
}),
onRowSelect: PropTypes.func,
onAllRowsSelect: PropTypes.func
diff --git a/packages/react-bootstrap-table2/test/body.test.js b/packages/react-bootstrap-table2/test/body.test.js
index 9a670a8..fc30b0b 100644
--- a/packages/react-bootstrap-table2/test/body.test.js
+++ b/packages/react-bootstrap-table2/test/body.test.js
@@ -275,6 +275,80 @@ describe('Body', () => {
expect(wrapper.find(Row).get(0).props.className).toEqual(className);
});
});
+
+ describe('if selectRow.bgColor is defined as a string', () => {
+ const bgColor = 'red';
+
+ beforeEach(() => {
+ selectRow.bgColor = bgColor;
+ wrapper = shallow(
+