fix #647

AllenFang · Aug 27, 2016 · b426974 · b426974
1 parent c6d2053
commit b426974
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js
@@ -1,6 +1,7 @@
 /* eslint no-alert: 0 */
 /* eslint max-len: 0 */
 import React, { Component, PropTypes } from 'react';
+import classSet from 'classnames';
 import Const from './Const';
 import TableHeader from './TableHeader';
 import TableBody from './TableBody';
@@ -258,13 +259,17 @@ class BootstrapTable extends Component {
     let sortIndicator = this.props.options.sortIndicator;
     if (typeof this.props.options.sortIndicator === 'undefined') sortIndicator = true;
     return (
-      <div className='react-bs-table-container' style={ this.props.containerStyle }>
+      <div className={ classSet('react-bs-table-container', this.props.containerClass) }
+        style={ this.props.containerStyle }>
         { toolBar }
-        <div className='react-bs-table' ref='table' style={ { ...style, ...this.props.tableStyle } }
+        <div ref='table'
+            className={ classSet('react-bs-table', this.props.tableContainerClass) }
+            style={ { ...style, ...this.props.tableStyle } }
             onMouseEnter={ this.handleMouseEnter }
             onMouseLeave={ this.handleMouseLeave }>
           <TableHeader
             ref='header'
+            headerContainerClass={ this.props.headerContainerClass }
             tableHeaderClass={ this.props.tableHeaderClass }
             style={ this.props.headerStyle }
             rowSelectType={ this.props.selectRow.mode }
@@ -282,6 +287,7 @@ class BootstrapTable extends Component {
             { this.props.children }
           </TableHeader>
           <TableBody ref='body'
+            bodyContainerClass={ this.props.bodyContainerClass }
             tableBodyClass={ this.props.tableBodyClass }
             style={ { ...style, ...this.props.bodyStyle } }
             data={ this.state.data }
@@ -982,6 +988,10 @@ BootstrapTable.propTypes = {
   containerStyle: PropTypes.object,
   headerStyle: PropTypes.object,
   bodyStyle: PropTypes.object,
+  containerClass: PropTypes.string,
+  tableContainerClass: PropTypes.string,
+  headerContainerClass: PropTypes.string,
+  bodyContainerClass: PropTypes.string,
   tableHeaderClass: PropTypes.string,
   tableBodyClass: PropTypes.string,
   options: PropTypes.shape({
@@ -1072,6 +1082,10 @@ BootstrapTable.defaultProps = {
   containerStyle: undefined,
   headerStyle: undefined,
   bodyStyle: undefined,
+  containerClass: null,
+  tableContainerClass: null,
+  headerContainerClass: null,
+  bodyContainerClass: null,
   tableHeaderClass: null,
   tableBodyClass: null,
   options: {

diff --git a/src/TableBody.js b/src/TableBody.js
@@ -139,7 +139,9 @@ class TableBody extends Component {
     this.editing = false;
 
     return (
-      <div ref='container' className='react-bs-container-body' style={ this.props.style }>
+      <div ref='container'
+        className={ classSet('react-bs-container-body', this.props.bodyContainerClass) }
+        style={ this.props.style }>
         <table className={ tableClasses }>
           { tableHeader }
           <tbody ref='tbody'>
@@ -290,6 +292,7 @@ TableBody.propTypes = {
   onSelectRow: PropTypes.func,
   noDataText: PropTypes.oneOfType([ PropTypes.string, PropTypes.object ]),
   style: PropTypes.object,
-  tableBodyClass: PropTypes.string
+  tableBodyClass: PropTypes.string,
+  bodyContainerClass: PropTypes.string
 };
 export default TableBody;
diff --git a/src/TableHeader.js b/src/TableHeader.js
@@ -23,7 +23,10 @@ class Checkbox extends Component {
 class TableHeader extends Component {
 
   render() {
-    const containerClasses = classSet('react-bs-container-header', 'table-header-wrapper');
+    const containerClasses = classSet(
+      'react-bs-container-header',
+      'table-header-wrapper',
+      this.props.headerContainerClass);
     const tableClasses = classSet('table', 'table-hover', {
       'table-bordered': this.props.bordered,
       'table-condensed': this.props.condensed
@@ -78,6 +81,7 @@ class TableHeader extends Component {
   }
 }
 TableHeader.propTypes = {
+  headerContainerClass: PropTypes.string,
   tableHeaderClass: PropTypes.string,
   style: PropTypes.object,
   rowSelectType: PropTypes.string,