onRowClick feature

Author: Tony Baeg

src/BootstrapTable.js

@@ -167,6 +167,7 @@ class BootstrapTable extends React.Component {
             sortName={this.props.options.sortName}
             sortOrder={this.props.options.sortOrder}
             onSort={this.handleSort.bind(this)}
+            onRowClick={this.handleRowClick.bind(this)}
             onSelectAllRow={this.handleSelectAllRow.bind(this)}
             bordered={this.props.bordered}>
             {this.props.children}
@@ -184,7 +185,9 @@ class BootstrapTable extends React.Component {
             selectRow={this.props.selectRow}
             cellEdit={this.props.cellEdit}
             selectedRowKeys={this.state.selectedRowKeys}
-            onSelectRow={this.handleSelectRow.bind(this)}/>
+            onRowClick={this.handleRowClick.bind(this)}
+            onSelectRow={this.handleSelectRow.bind(this)}
+          />
           {tableFilter}
           {pagination}
         </div>
@@ -223,6 +226,12 @@ class BootstrapTable extends React.Component {
     });
   }
 
+  handleRowClick(row) {
+    if (this.props.selectRow.onRowClick) {
+      this.props.selectRow.onRowClick(row);
+    }
+  }
+
   handleSelectAllRow(e) {
     var isSelected = e.currentTarget.checked;
     let selectedRowKeys = [];
@@ -503,6 +512,7 @@ BootstrapTable.propTypes = {
     mode: React.PropTypes.string,
     bgColor: React.PropTypes.string,
     selected: React.PropTypes.array,
+    onRowClick: React.PropTypes.func,
     onSelect: React.PropTypes.func,
     onSelectAll: React.PropTypes.func,
     clickToSelect: React.PropTypes.bool,
@@ -548,6 +558,7 @@ BootstrapTable.defaultProps = {
     mode: Const.ROW_SELECT_NONE,
     bgColor: Const.ROW_SELECT_BG_COLOR,
     selected: [],
+    onRowClick: undefined,
     onSelect: undefined,
     onSelectAll: undefined,
     clickToSelect: false,

src/TableBody.js

@@ -104,6 +104,7 @@ class TableBody extends React.Component{
         <TableRow isSelected={selected} key={r} className={trClassName}
           selectRow={isSelectRowDefined?this.props.selectRow:undefined}
           enableCellEdit={this.props.cellEdit.mode !== Const.CELL_EDIT_NONE}
+          onRowClick={this.handleRowClick.bind(this)}
           onSelectRow={this.handleSelectRow.bind(this)}>
           {selectRowColumn}
           {tableColumns}
@@ -158,6 +159,17 @@ class TableBody extends React.Component{
     )
   }
 
+  handleRowClick(rowIndex){
+    var key, selectedRow;
+    this.props.data.forEach(function(row, i){
+      if(i == rowIndex-1){
+        key = row[this.props.keyField];
+        selectedRow = row;
+      }
+    }, this);
+    this.props.onRowClick(selectedRow);
+  }
+
   handleSelectRow(rowIndex, isSelected){
     var key, selectedRow;
     this.props.data.forEach(function(row, i){
@@ -234,6 +246,7 @@ TableBody.propTypes = {
   condensed: React.PropTypes.bool,
   keyField: React.PropTypes.string,
   selectedRowKeys: React.PropTypes.array,
+  onRowClick: React.PropTypes.func,
   onSelectRow: React.PropTypes.func
 };
 export default TableBody;

src/TableRow.js

@@ -5,7 +5,8 @@ class TableRow extends React.Component{
 
   rowClick(e){
     if(e.target.tagName !== "INPUT")
-      this.props.onSelectRow(e.currentTarget.rowIndex, !this.props.isSelected);
+      if (this.props.selectRow.clickToSelect) this.props.onSelectRow(e.currentTarget.rowIndex, !this.props.isSelected);
+      if (this.props.selectRow.onRowClick) this.props.onRowClick(e.currentTarget.rowIndex);
   }
 
   render(){
@@ -18,7 +19,7 @@ class TableRow extends React.Component{
     };
 
     if(this.props.selectRow && !this.props.enableCellEdit &&
-      (this.props.selectRow.clickToSelect || this.props.selectRow.clickToSelectAndEditCell)){
+      (this.props.selectRow.clickToSelect || this.props.selectRow.clickToSelectAndEditCell) || this.props.selectRow.onRowClick){
       return(
         <tr {...trCss} onClick={this.rowClick.bind(this)}>{this.props.children}</tr>
       )
@@ -32,6 +33,7 @@ class TableRow extends React.Component{
 TableRow.propTypes = {
   isSelected: React.PropTypes.bool,
   enableCellEdit: React.PropTypes.bool,
+  onRowClick: React.PropTypes.func,
   onSelectRow: React.PropTypes.func
 };
 export default TableRow;