Adding Table with borderless feature

AllenFang · Sep 30, 2015 · 0cc7d0b · 0cc7d0b
1 parent f5db238
commit 0cc7d0b
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 9 deletions.
diff --git a/css/react-bootstrap-table.css b/css/react-bootstrap-table.css
@@ -3,17 +3,16 @@
 }
 .react-bs-table .table-header{
   height: 37px;
-  border-right-width: 1px;
-  border-right-style: solid;
-  border-right-color: rgb(221, 221, 221);
   border-top-width: 1px;
   border-top-style: solid;
   border-top-color: rgb(221, 221, 221);
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-bottom-color: rgb(221, 221, 221);
 }
 
 .react-bs-table .table-header > table{
   table-layout: fixed;
-  border-right-style: hidden;
   border-top-style: hidden;
 }
 

diff --git a/css/react-bootstrap-table.min.css b/css/react-bootstrap-table.min.css
diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js
@@ -129,11 +129,13 @@ class BootstrapTable extends React.Component{
                        sortName={this.props.options.sortName}
                        sortOrder={this.props.options.sortOrder}
                        onSort={this.handleSort.bind(this)}
-                       onSelectAllRow={this.handleSelectAllRow.bind(this)}>
+                       onSelectAllRow={this.handleSelectAllRow.bind(this)}
+                       bordered={this.props.bordered}>
             {this.props.children}
           </TableHeader>
           <TableBody ref="body" data={this.state.data} columns={columns}
             striped={this.props.striped}
+            bordered={this.props.bordered}
             hover={this.props.hover}
             keyField={this.store.getKeyField()}
             condensed={this.props.condensed}
@@ -376,6 +378,7 @@ BootstrapTable.propTypes = {
   height: React.PropTypes.string,
   data: React.PropTypes.array,
   striped: React.PropTypes.bool,
+  bordered: React.PropTypes.bool,
   hover: React.PropTypes.bool,
   condensed: React.PropTypes.bool,
   pagination: React.PropTypes.bool,
@@ -410,6 +413,7 @@ BootstrapTable.propTypes = {
 BootstrapTable.defaultProps = {
   height: "100%",
   striped: false,
+  bordered: true,
   hover: false,
   condensed: false,
   pagination: false,

diff --git a/src/TableBody.js b/src/TableBody.js
@@ -18,8 +18,9 @@ class TableBody extends React.Component{
   render(){
     var containerClasses = classSet("table-container");
 
-    var tableClasses = classSet("table", "table-bordered", {
+    var tableClasses = classSet("table", {
       'table-striped': this.props.striped,
+      'table-bordered': this.props.bordered,
       'table-hover': this.props.hover,
       'table-condensed': this.props.condensed
     });
@@ -200,6 +201,7 @@ TableBody.propTypes = {
   data: React.PropTypes.array,
   columns: React.PropTypes.array,
   striped: React.PropTypes.bool,
+  bordered: React.PropTypes.bool,
   hover: React.PropTypes.bool,
   condensed: React.PropTypes.bool,
   keyField: React.PropTypes.string,

diff --git a/src/TableHeader.js b/src/TableHeader.js
@@ -38,12 +38,15 @@ class TableHeader extends React.Component{
 
   render(){
     var containerClasses = classSet("table-header");
+    var tableClasses = classSet("table", "table-hover", {
+        "table-bordered": this.props.bordered
+    });
     var selectRowHeaderCol = this.props.hideSelectColumn?null:this.renderSelectRowHeader();
     this._attachClearSortCaretFunc();
 
     return(
       <div className={containerClasses}>
-        <table className="table table-hover table-bordered">
+        <table className={tableClasses}>
           <thead>
             <tr ref="header">
               {selectRowHeaderCol}
@@ -83,7 +86,8 @@ TableHeader.propTypes = {
   onSelectAllRow: React.PropTypes.func,
   sortName: React.PropTypes.string,
   sortOrder: React.PropTypes.string,
-  hideSelectColumn: React.PropTypes.bool
+  hideSelectColumn: React.PropTypes.bool,
+  bordered: React.PropTypes.bool
 };
 
 TableHeader.defaultProps = {