fix #1231

AllenFang · AllenFang · commit 7b593a783c2f · 2020-02-09T15:41:16.000+08:00
diff --git a/docs/README.md b/docs/README.md
@@ -21,6 +21,7 @@
 * [classes](#classes)
 * [wrapperClasses](#wrapperClasses)
 * [headerClasses](#headerClasses)
+* [headerWrapperClasses](#headerWrapperClasses)
 * [cellEdit](#cellEdit)
 * [selectRow](#selectRow)
 * [expandRow](#expandRow)
@@ -137,6 +138,9 @@ 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='headerWrapperClasses'>headerWrapperClasses - [String]</a>
+Customize class on the `thead`. 
+
 ### <a name='cellEdit'>cellEdit - [Object]</a>
 Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail.
 
diff --git a/packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js b/packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js
@@ -33,6 +33,8 @@ const columns = [{
 
 <BootstrapTable id="bar" keyField='id' data={ products } columns={ columns } />
 <BootstrapTable classes="foo" keyField='id' data={ products } columns={ columns } />
+<BootstrapTable headerWrapperClasses="foo" keyField="id" data={ products } columns={ columns } />
+<BootstrapTable bodyClasses="foo" keyField="id" data={ products } columns={ columns } />
 <BootstrapTable wrapperClasses="boo" keyField="id" data={ products } columns={ columns } />
 `;
 
@@ -44,6 +46,12 @@ export default () => (
     <h4> Customized table className </h4>
     <BootstrapTable classes="foo" keyField="id" data={ products } columns={ columns } />
 
+    <h4> Customized thead className </h4>
+    <BootstrapTable headerWrapperClasses="foo" keyField="id" data={ products } columns={ columns } />
+
+    <h4> Customized tbody className </h4>
+    <BootstrapTable bodyClasses="foo" keyField="id" data={ products } columns={ columns } />
+
     <h4> Customized wrapper className </h4>
     <BootstrapTable wrapperClasses="boo" keyField="id" data={ products } columns={ columns } />
 
diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/base-table/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/base-table/_index.scss
@@ -1,4 +1,4 @@
-table.foo {
+.foo {
   background-color: $grey-500;
 }
 
diff --git a/packages/react-bootstrap-table2/src/body.js b/packages/react-bootstrap-table2/src/body.js
@@ -60,7 +60,8 @@ class Body extends React.Component {
       rowStyle,
       rowClasses,
       rowEvents,
-      expandRow
+      expandRow,
+      className
     } = this.props;
 
     let content;
@@ -110,7 +111,7 @@ class Body extends React.Component {
     }
 
     return (
-      <tbody>{ content }</tbody>
+      <tbody className={ className }>{ content }</tbody>
     );
   }
 }
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -94,6 +94,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
           <Header
             columns={ columns }
             className={ this.props.headerClasses }
+            wrapperClasses={ this.props.headerWrapperClasses }
             sortField={ this.props.sortField }
             sortOrder={ this.props.sortOrder }
             onSort={ this.props.onSort }
@@ -119,6 +120,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
             />
           )}
           <Body
+            className={ this.props.bodyClasses }
             data={ this.getData() }
             keyField={ keyField }
             tabIndexCell={ tabIndexCell }
@@ -163,7 +165,10 @@ BootstrapTable.propTypes = {
   tabIndexCell: PropTypes.bool,
   id: PropTypes.string,
   classes: PropTypes.string,
+  headerClasses: PropTypes.string,
+  bodyClasses: PropTypes.string,
   wrapperClasses: PropTypes.string,
+  headerWrapperClasses: PropTypes.string,
   condensed: PropTypes.bool,
   caption: PropTypes.oneOfType([
     PropTypes.node,
@@ -221,7 +226,6 @@ BootstrapTable.propTypes = {
   rowStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   rowEvents: PropTypes.object,
   rowClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  headerClasses: PropTypes.string,
   filtersClasses: PropTypes.string,
   filterPosition: PropTypes.oneOf([
     Const.FILTERS_POSITION_TOP,
diff --git a/packages/react-bootstrap-table2/src/header.js b/packages/react-bootstrap-table2/src/header.js
@@ -22,7 +22,8 @@ const Header = (props) => {
     currFilters,
     onExternalFilter,
     filterPosition,
-    globalSortCaret
+    globalSortCaret,
+    wrapperClasses
   } = props;
 
   let SelectionHeaderCellComp = () => null;
@@ -80,7 +81,7 @@ const Header = (props) => {
   }
 
   return (
-    <thead>
+    <thead className={ wrapperClasses }>
       <tr className={ className }>
         { childrens }
       </tr>
@@ -99,6 +100,7 @@ Header.propTypes = {
   onExternalFilter: PropTypes.func,
   globalSortCaret: PropTypes.func,
   className: PropTypes.string,
+  wrapperClasses: PropTypes.string,
   expandRow: PropTypes.object,
   filterPosition: PropTypes.oneOf([
     Const.FILTERS_POSITION_TOP,

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-table.foo {`
	`1`	`+.foo {`
`2`	`2`	`background-color: $grey-500;`
`3`	`3`	`}`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,8 @@ class Body extends React.Component {`
`60`	`60`	`rowStyle,`
`61`	`61`	`rowClasses,`
`62`	`62`	`rowEvents,`
`63`		`- expandRow`
	`63`	`+ expandRow,`
	`64`	`+ className`
`64`	`65`	`} = this.props;`
`65`	`66`
`66`	`67`	`let content;`
`@@ -110,7 +111,7 @@ class Body extends React.Component {`
`110`	`111`	`}`
`111`	`112`
`112`	`113`	`return (`
`113`		`- <tbody>{ content }</tbody>`
	`114`	`+ <tbody className={ className }>{ content }</tbody>`
`114`	`115`	`);`
`115`	`116`	`}`
`116`	`117`	`}`