Add support for row onClick to SortableTable

src/components/SortableTable.js

@@ -22,20 +22,22 @@ class SortableTable extends React.Component {
     rows: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
     rowClassName: PropTypes.func,
     rowExpanded: PropTypes.func,
+    rowOnClick: PropTypes.func,
     // TODO? support sort type icons (FontAwesome has numeric, A->Z, Z->A)
   };
 
   static defaultProps = {
     ...Table.defaultProps,
     rows: [],
     rowClassName: () => undefined,
-    rowExpanded: () => false
+    rowExpanded: () => false,
+    rowOnClick: () => {}
   };
 
-  renderRow(row, columns, rowClassName, rowExpanded) {
+  renderRow(row, columns, rowClassName, rowExpanded, rowOnClick) {
     const expanded = rowExpanded(row);
     return [
-      <tr key={row.key} className={rowClassName(row)}>
+      <tr key={row.key} className={rowClassName(row)} onClick={() => rowOnClick(row)}>
         {columns.map(column => <td key={column.key} className={column.align && `text-${column.align}`}>{column.cell(row)}</td>)}
       </tr>,
       expanded && <tr hidden />,
@@ -50,7 +52,7 @@ class SortableTable extends React.Component {
   }
 
   render() {
-    const { columns, rowClassName, rowExpanded, rows, ...props } = this.props;
+    const { columns, rowClassName, rowExpanded, rowOnClick, rows, ...props } = this.props;
     const showColgroup = columns.some(column => column.width);
     const showFooter = columns.some(column => column.footer);
 
@@ -79,7 +81,7 @@ class SortableTable extends React.Component {
           </tr>
         </thead>
         <tbody>
-          {rows.map(row => this.renderRow(row, columns, rowClassName, rowExpanded))}
+          {rows.map(row => this.renderRow(row, columns, rowClassName, rowExpanded, rowOnClick))}
         </tbody>
         {showFooter &&
           <tfoot>

stories/SortableTable.js

@@ -45,6 +45,10 @@ class StatefulExample extends React.Component {
     }
   };
 
+  rowOnClick = (row) => {
+    alert(`clicked ${row.key}`);
+  };
+
   render() {
     const { ascending, column } = this.state;
     const { bordered, hover, size, striped } = this.props;
@@ -96,6 +100,7 @@ class StatefulExample extends React.Component {
         ]}
         rows={this.sortedData(column, ascending)}
         rowExpanded={row => row.expanded && <div className="py-1"><Button color="danger" size="sm">Delete</Button></div>}
+        rowOnClick={this.rowOnClick}
       />
     );
   }
@@ -245,7 +250,7 @@ class StatefulExample extends React.Component {
       />
     );
   }
-}  
+}
         `}
         </pre>
       </Card>

test/components/SortableTable.spec.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import assert from 'assert';
+import sinon from 'sinon';
 import { mount } from 'enzyme';
 
 import { SortableTable } from '../../src';
@@ -213,6 +214,21 @@ describe('<SortableTable />', () => {
     assert(span.exists());
   });
 
+  it('should supply onClick row handler when specified', () => {
+    const columns = [{ header: 'Name', cell: row => row }];
+    const rows = ['Alpha', 'Bravo', 'Charlie', 'Delta'];
+    const onClick = sinon.stub();
+    const wrapper = mount(
+      <SortableTable
+        columns={columns}
+        rows={rows}
+        rowOnClick={onClick}
+      />
+    );
+    wrapper.find('tbody tr').first().simulate('click');
+    sinon.assert.calledWith(onClick, 'Alpha');
+  });
+
   it('should render correct align when present', () => {
     const columns = [
       { header: 'Default', cell: () => '-', footer: '-' },