diff --git a/docs/README.md b/docs/README.md
index 83213a6..14782fe 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -18,6 +18,7 @@
* [id](#id)
* [classes](#classes)
* [wrapperClasses](#wrapperClasses)
+* [headerClasses](#headerClasses)
* [cellEdit](#cellEdit)
* [selectRow](#selectRow)
* [rowStyle](#rowStyle)
@@ -111,6 +112,10 @@ Customize class on `table` element.
### wrapperClasses - [String]
Customize class on the outer element which wrap up the `table` element.
+
+### headerClasses - [String]
+Customize class on the header row(`tr`).
+
### cellEdit - [Object]
Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail.
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/header-class-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/header-class-table.js
new file mode 100644
index 0000000..2c480c1
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/header-class-table.js
@@ -0,0 +1,52 @@
+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';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+`;
+
+export default () => (
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 64c4909..77dc4c9 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -33,6 +33,7 @@ import HeaderColumnEventTable from 'examples/header-columns/column-event-table';
import HeaderColumnClassTable from 'examples/header-columns/column-class-table';
import HeaderColumnStyleTable from 'examples/header-columns/column-style-table';
import HeaderColumnAttrsTable from 'examples/header-columns/column-attrs-table';
+import HeaderClassTable from 'examples/header-columns/header-class-table';
// column filter
import TextFilter from 'examples/column-filter/text-filter';
@@ -165,7 +166,8 @@ storiesOf('Work on Header Columns', module)
.add('Column Event', () => )
.add('Customize Column Class', () => )
.add('Customize Column Style', () => )
- .add('Customize Column HTML attribute', () => );
+ .add('Customize Column HTML attribute', () => )
+ .add('Header Class', () => );
storiesOf('Column Filter', module)
.add('Text Filter', () => )
diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss
index 3468c70..a0ec3d1 100644
--- a/packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss
+++ b/packages/react-bootstrap-table2-example/stories/stylesheet/columns/_index.scss
@@ -9,4 +9,8 @@
.demo-row-odd {
background-color: $green-lighten-4;
+}
+
+.header-class {
+ background-color: $green-lighten-4;
}
\ No newline at end of file
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index fe6865c..e9ee145 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -86,6 +86,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
{ tableCaption }
{
const { ROW_SELECT_DISABLED } = Const;
const {
+ className,
columns,
onSort,
onFilter,
@@ -21,7 +22,7 @@ const Header = (props) => {
return (
-
+
{
(selectRow.mode !== ROW_SELECT_DISABLED && !selectRow.hideSelectColumn)
? : null
@@ -60,7 +61,8 @@ Header.propTypes = {
sortField: PropTypes.string,
sortOrder: PropTypes.string,
selectRow: PropTypes.object,
- onExternalFilter: PropTypes.func
+ onExternalFilter: PropTypes.func,
+ className: PropTypes.string
};
export default Header;
diff --git a/packages/react-bootstrap-table2/test/header.test.js b/packages/react-bootstrap-table2/test/header.test.js
index c502602..d8db9cd 100644
--- a/packages/react-bootstrap-table2/test/header.test.js
+++ b/packages/react-bootstrap-table2/test/header.test.js
@@ -29,6 +29,25 @@ describe('Header', () => {
});
});
+ describe('className prop is exists', () => {
+ const className = 'test-class';
+
+ beforeEach(() => {
+ wrapper = shallow(
+
+ );
+ });
+
+ it('should render successfully', () => {
+ expect(wrapper.length).toBe(1);
+ expect(wrapper.find(`.${className}`).length).toBe(1);
+ });
+ });
+
describe('header with columns enable sort', () => {
const sortField = columns[1].dataField;