diff --git a/docs/row-selection.md b/docs/row-selection.md
index b885d04..af2d16a 100644
--- a/docs/row-selection.md
+++ b/docs/row-selection.md
@@ -22,6 +22,7 @@
* [selectionRenderer](#selectionRenderer)
* [selectionHeaderRenderer](#selectionHeaderRenderer)
* [headerColumnStyle](#headerColumnStyle)
+* [selectColumnStyle](#selectColumnStyle)
### selectRow.mode - [String]
@@ -225,6 +226,42 @@ const selectRow = {
};
```
+### selectRow.selectColumnStyle - [Object | Function]
+A way to custome the selection cell. `selectColumnStyle` not only accept a simple style object but also a callback function for more flexible customization:
+
+### Style Object
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ selectColumnStyle: { backgroundColor: 'blue' }
+};
+```
+
+### Callback Function
+If a callback function present, you can get below information to custom the selection cell:
+
+* `checked`: Whether current row is seleccted or not
+* `disabled`: Whether current row is disabled or not
+* `rowIndex`: Current row index
+* `rowKey`: Current row key
+
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ selectColumnStyle: ({
+ checked,
+ disabled,
+ rowIndex,
+ rowKey
+ }) => (
+ // ....
+ return { backgroundColor: 'blue' };
+ )
+};
+```
+
### selectRow.onSelect - [Function]
This callback function will be called when a row is select/unselect and pass following three arguments:
`row`, `isSelect`, `rowIndex` and `e`.
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/select-column-style.js b/packages/react-bootstrap-table2-example/examples/row-selection/select-column-style.js
new file mode 100644
index 0000000..fd1e237
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/select-column-style.js
@@ -0,0 +1,110 @@
+/* eslint no-unused-vars: 0 */
+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(2);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow1 = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ selectColumnStyle: {
+ backgroundColor: 'grey'
+ }
+};
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ...
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ selectColumnStyle: {
+ backgroundColor: 'grey'
+ }
+};
+
+
+`;
+
+const selectRow2 = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ selectColumnStyle: ({
+ checked,
+ disabled,
+ rowIndex,
+ rowKey
+ }) => {
+ if (checked) {
+ return {
+ backgroundColor: 'yellow'
+ };
+ }
+ return {
+ backgroundColor: 'pink'
+ };
+ }
+};
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ...
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ selectColumnStyle: ({
+ checked,
+ disabled,
+ rowIndex,
+ rowKey
+ }) => {
+ if (checked) {
+ return {
+ backgroundColor: 'yellow'
+ };
+ }
+ return {
+ backgroundColor: 'pink'
+ };
+ }
+};
+
+
+`;
+
+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 d297cf9..2c71fac 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -150,6 +150,7 @@ import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor';
import SelectionHooks from 'examples/row-selection/selection-hooks';
import HideSelectionColumnTable from 'examples/row-selection/hide-selection-column';
+import SelectionColumnStyleTable from 'examples/row-selection/select-column-style';
import SelectionColumnPositionTable from 'examples/row-selection/selection-column-position';
// work on row expand
@@ -396,6 +397,7 @@ storiesOf('Row Selection', module)
.add('Not Selectabled Rows', () => )
.add('Selection Hooks', () => )
.add('Hide Selection Column', () => )
+ .add('Custom Selection Column Style', () => )
.add('Selection Column Position', () => );
storiesOf('Row Expand', module)
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 32dfb86..b708874 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -169,6 +169,7 @@ BootstrapTable.propTypes = {
selectionRenderer: PropTypes.func,
selectionHeaderRenderer: PropTypes.func,
headerColumnStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+ selectColumnStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
selectColumnPosition: PropTypes.oneOf([
Const.INDICATOR_POSITION_LEFT,
Const.INDICATOR_POSITION_RIGHT
diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
index 5e8b27c..d7f8ec8 100644
--- a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
+++ b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
@@ -5,6 +5,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Const from '../const';
+import _ from '../utils';
import { BootstrapContext } from '../contexts/bootstrap';
export default class SelectionCell extends Component {
@@ -17,7 +18,8 @@ export default class SelectionCell extends Component {
rowIndex: PropTypes.number,
tabIndex: PropTypes.number,
clickToSelect: PropTypes.bool,
- selectionRenderer: PropTypes.func
+ selectionRenderer: PropTypes.func,
+ selectColumnStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
}
constructor() {
@@ -31,7 +33,8 @@ export default class SelectionCell extends Component {
this.props.selected !== nextProps.selected ||
this.props.disabled !== nextProps.disabled ||
this.props.rowKey !== nextProps.rowKey ||
- this.props.tabIndex !== nextProps.tabIndex;
+ this.props.tabIndex !== nextProps.tabIndex ||
+ this.props.selectColumnStyle !== nextProps.selectColumnStyle;
return shouldUpdate;
}
@@ -57,17 +60,28 @@ export default class SelectionCell extends Component {
render() {
const {
+ rowKey,
mode: inputType,
selected,
disabled,
tabIndex,
rowIndex,
- selectionRenderer
+ selectionRenderer,
+ selectColumnStyle
} = this.props;
const attrs = {};
if (tabIndex !== -1) attrs.tabIndex = tabIndex;
+ attrs.style = _.isFunction(selectColumnStyle) ?
+ selectColumnStyle({
+ checked: selected,
+ disabled,
+ rowIndex,
+ rowKey
+ }) :
+ selectColumnStyle;
+
return (
{