diff --git a/docs/row-selection.md b/docs/row-selection.md
index b72ceea..4615a43 100644
--- a/docs/row-selection.md
+++ b/docs/row-selection.md
@@ -20,6 +20,7 @@
* [hideSelectAll](#hideSelectAll)
* [selectionRenderer](#selectionRenderer)
* [selectionHeaderRenderer](#selectionHeaderRenderer)
+* [headerColumnStyle](#headerColumnStyle)
### selectRow.mode - [String]
@@ -198,6 +199,31 @@ const selectRow = {
> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
+
+### selectRow.headerColumnStyle - [Object | Function]
+A way to custome the selection header cell. `headerColumnStyle` not only accept a simple style object but also a callback function for more flexible customization:
+
+### Style Object
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ headerColumnStyle: { backgroundColor: 'blue' }
+};
+```
+
+### Callback Function
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ headerColumnStyle: (status) => (
+ // status available value is checked, indeterminate and unchecked
+ 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/header-style.js b/packages/react-bootstrap-table2-example/examples/row-selection/header-style.js
new file mode 100644
index 0000000..5db7718
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/header-style.js
@@ -0,0 +1,111 @@
+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,
+ headerColumnStyle: {
+ backgroundColor: 'blue'
+ }
+};
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ...
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ headerColumnStyle: {
+ backgroundColor: 'blue'
+ }
+};
+
+
+`;
+
+const selectRow2 = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ headerColumnStyle: (status) => {
+ if (status === 'checked') {
+ return {
+ backgroundColor: 'yellow'
+ };
+ } else if (status === 'indeterminate') {
+ return {
+ backgroundColor: 'pink'
+ };
+ } else if (status === 'unchecked') {
+ return {
+ backgroundColor: 'grey'
+ };
+ }
+ return {};
+ }
+};
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ...
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ headerColumnStyle: (status) => {
+ if (status === 'checked') {
+ return {
+ backgroundColor: 'yellow'
+ };
+ } else if (status === 'indeterminate') {
+ return {
+ backgroundColor: 'pink'
+ };
+ } else if (status === 'unchecked') {
+ return {
+ backgroundColor: 'grey'
+ };
+ }
+ return {};
+ }
+};
+
+
+`;
+
+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 9bd79b8..d11abfb 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -142,6 +142,7 @@ import SelectionWithExpansionTable from 'examples/row-selection/selection-with-e
import SelectionNoDataTable from 'examples/row-selection/selection-no-data';
import SelectionStyleTable from 'examples/row-selection/selection-style';
import SelectionClassTable from 'examples/row-selection/selection-class';
+import HeaderStyleTable from 'examples/row-selection/header-style';
import HideSelectAllTable from 'examples/row-selection/hide-select-all';
import CustomSelectionTable from 'examples/row-selection/custom-selection';
import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
@@ -385,6 +386,7 @@ storiesOf('Row Selection', module)
.add('Selection without Data', () => )
.add('Selection Style', () => )
.add('Selection Class', () => )
+ .add('Custom Selection Column Header Style', () => )
.add('Hide Select All', () => )
.add('Custom Selection', () => )
.add('Selection Background Color', () => )
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index bc0bc79..928b548 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -167,7 +167,8 @@ BootstrapTable.propTypes = {
bgColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
hideSelectColumn: PropTypes.bool,
selectionRenderer: PropTypes.func,
- selectionHeaderRenderer: PropTypes.func
+ selectionHeaderRenderer: PropTypes.func,
+ headerColumnStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
}),
expandRow: PropTypes.shape({
renderer: PropTypes.func,
diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js
index 8635bd5..5d65ce3 100644
--- a/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js
+++ b/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js
@@ -3,6 +3,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Const from '../const';
import { BootstrapContext } from '../contexts/bootstrap';
+import _ from '../utils';
export const CheckBox = ({ className, checked, indeterminate }) => (
;
}
@@ -79,6 +87,10 @@ export default class SelectionHeaderCell extends Component {
attrs.onClick = this.handleCheckBoxClick;
}
+ attrs.style = _.isFunction(headerColumnStyle) ?
+ headerColumnStyle(checkedStatus) :
+ headerColumnStyle;
+
return (
{