fix #394 (#414)

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.
 
 ### <a name='wrapperClasses'>wrapperClasses - [String]</a>
 Customize class on the outer element which wrap up the `table` element. 
+
+### <a name='headerClasses'>headerClasses - [String]</a>
+Customize class on the header row(`tr`). 
+
 ### <a name='cellEdit'>cellEdit - [Object]</a>
 Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail.
 

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'
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  headerClasses="header-class"
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      headerClasses="header-class"
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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', () => <HeaderColumnEventTable />)
   .add('Customize Column Class', () => <HeaderColumnClassTable />)
   .add('Customize Column Style', () => <HeaderColumnStyleTable />)
-  .add('Customize Column HTML attribute', () => <HeaderColumnAttrsTable />);
+  .add('Customize Column HTML attribute', () => <HeaderColumnAttrsTable />)
+  .add('Header Class', () => <HeaderClassTable />);
 
 storiesOf('Column Filter', module)
   .add('Text Filter', () => <TextFilter />)

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;
 }

packages/react-bootstrap-table2/src/bootstrap-table.js

@@ -86,6 +86,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
           { tableCaption }
           <Header
             columns={ columns }
+            className={ this.props.headerClasses }
             sortField={ store.sortField }
             sortOrder={ store.sortOrder }
             onSort={ this.props.onSort }
@@ -155,6 +156,7 @@ BootstrapTable.propTypes = {
   rowStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   rowEvents: PropTypes.object,
   rowClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  headerClasses: PropTypes.string,
   defaultSorted: PropTypes.arrayOf(PropTypes.shape({
     dataField: PropTypes.string.isRequired,
     order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired

packages/react-bootstrap-table2/src/header.js

@@ -10,6 +10,7 @@ const Header = (props) => {
   const { ROW_SELECT_DISABLED } = Const;
 
   const {
+    className,
     columns,
     onSort,
     onFilter,
@@ -21,7 +22,7 @@ const Header = (props) => {
 
   return (
     <thead>
-      <tr>
+      <tr className={ className }>
         {
           (selectRow.mode !== ROW_SELECT_DISABLED && !selectRow.hideSelectColumn)
             ? <SelectionHeaderCell { ...selectRow } /> : 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;

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(
+        <Header
+          { ...mockHeaderResolvedProps }
+          columns={ columns }
+          className={ className }
+        />
+      );
+    });
+
+    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;