feat(table): allow row click with "onRowClick" prop

Author: assisrafael

demo/TableExamples.jsx

@@ -73,6 +73,7 @@ export function TableExamples() {
               { a: 4, b: 5, c: 6 },
               { a: 7, b: 8, c: 9 },
             ]}
+            onRowClick={console.log}
           />
         </div>
 
@@ -150,6 +151,7 @@ export function TableExamples() {
               { a: 4, b: 5, c: 6 },
               { a: 7, b: 8, c: 9 },
             ]}
+            onRowClick={console.info}
             actions={[
               {
                 title: 'View details',

demo/demo.jsx

@@ -16,7 +16,7 @@ ReactDOM.render(
       <ToastsContainer>
         <StatefulTabs
           vertical={true}
-          initialTab={1}
+          initialTab={4}
           tabs={[
             {
               title: 'Dialog',

src/table/Table.jsx

@@ -14,6 +14,7 @@ export function Table({
   dark,
   rowClass,
   caption,
+  onRowClick,
   actions,
   actionLabel,
   columnHeaderFormat,
@@ -34,7 +35,7 @@ export function Table({
       <table className={tableClasses}>
         {caption && <caption>{caption}</caption>}
         <TableHead {...{ actions, actionLabel, columnHeaderFormat }} columns={normalizedColumns} />
-        <TableBody {...{ docs, rowClass, actions }} columns={normalizedColumns} />
+        <TableBody {...{ docs, rowClass, actions, onRowClick }} columns={normalizedColumns} />
       </table>
     </div>
   );
@@ -48,6 +49,7 @@ Table.defaultProps = {
   dark: false,
   actionLabel: 'Actions',
   rowClass: () => '',
+  onRowClick: () => {},
   columnHeaderFormat: (label) => label,
 };
 
@@ -61,6 +63,7 @@ Table.propTypes = {
   dark: PropTypes.bool,
   docs: PropTypes.arrayOf(PropTypes.object),
   hover: PropTypes.bool,
+  onRowClick: PropTypes.func,
   rowClass: PropTypes.func,
   small: PropTypes.bool,
   striped: PropTypes.bool,

src/table/TableBody.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getColumnClass } from './table-helpers';
-import { safeClick } from '../utils/event-handlers';
+import { safeClick, stopPropagation } from '../utils/event-handlers';
 import { getValueByPath } from '../utils/getters-setters';
 
-export function TableBody({ columns, docs, rowClass, actions }) {
+export function TableBody({ columns, docs, rowClass, actions, onRowClick }) {
   return (
     <tbody>
       {docs.map((doc, docIndex) => (
-        <tr key={docIndex} className={rowClass(doc)}>
+        <tr key={docIndex} className={rowClass(doc)} role="button" onClick={safeClick(onRowClick, doc, docIndex)}>
           {columns.map((column, columnIndex) => (
             <td key={columnIndex} className={getColumnClass(column)}>
               {getColumnValue(doc, column, docIndex)}
@@ -21,7 +21,7 @@ export function TableBody({ columns, docs, rowClass, actions }) {
                 <a
                   key={actionIndex}
                   title={action.title}
-                  {...getActionProps(action, doc)}
+                  {...getActionProps(action, doc, docIndex)}
                   className={actionIndex > 0 ? 'ml-2' : ''}
                 >
                   {action.content}
@@ -40,6 +40,7 @@ TableBody.propTypes = {
   columns: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
   docs: PropTypes.arrayOf(PropTypes.object),
   rowClass: PropTypes.func,
+  onRowClick: PropTypes.func,
 };
 
 function getColumnValue(doc, column, docIndex) {
@@ -52,14 +53,15 @@ function getColumnValue(doc, column, docIndex) {
   return column.format(rawValue, doc, docIndex);
 }
 
-function getActionProps(action, doc) {
+function getActionProps(action, doc, docIndex) {
   const props = {};
 
   if (action.onClick) {
     props.href = '';
-    props.onClick = safeClick(action.onClick, doc);
+    props.onClick = safeClick(action.onClick, doc, docIndex);
   } else if (action.link) {
-    props.href = action.link(doc);
+    props.onClick = stopPropagation;
+    props.href = action.link(doc, docIndex);
   }
 
   return props;