Provide onClick handleOriginal function

tannerlinsley · tannerlinsley · commit 9846bf190565 · 2017-08-02T13:15:16.000-06:00
Fixes TanStack#406
diff --git a/README.md b/README.md
@@ -593,12 +593,21 @@ This makes it extremely easy to add, say... a row click callback!
 <ReactTable
   getTdProps={(state, rowInfo, column, instance) => {
     return {
-      onClick: e => {
+      onClick: (e, handleOriginal => {
         console.log('A Td Element was clicked!')
         console.log('it produced this event:', e)
         console.log('It was in this column:', column)
         console.log('It was in this row:', rowInfo)
         console.log('It was in this table instance:', instance)
+
+        // IMPORTANT! React-Table uses onClick internally to trigger
+        // events like expanding SubComponents and pivots.
+        // By default a custom 'onClick' handler will override this functionality.
+        // If you want to fire the original onClick handler, call the
+        // 'handleOriginal' function.
+        if (handleOriginal) {
+          handleOriginal()
+        }
       }
     }
   }}
diff --git a/src/index.js b/src/index.js
@@ -574,7 +574,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
 
               const value = cellInfo.value
 
-              let interactionProps
+              let useOnExpanderClick
               let isBranch
               let isPreview
 
@@ -626,17 +626,10 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
               if (cellInfo.pivoted || cellInfo.expander) {
                 // Make it expandable by defualt
                 cellInfo.expandable = true
-                interactionProps = {
-                  onClick: onExpanderClick,
-                }
+                useOnExpanderClick = true
                 // If pivoted, has no subRows, and does not have a subComponent, do not make expandable
-                if (cellInfo.pivoted) {
-                  if (!cellInfo.subRows) {
-                    if (!SubComponent) {
-                      cellInfo.expandable = false
-                      interactionProps = {}
-                    }
-                  }
+                if (cellInfo.pivoted && !cellInfo.subRows && !SubComponent) {
+                  cellInfo.expandable = false
                 }
               }
 
@@ -693,6 +686,21 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
                 }
               }
 
+              // If there are multiple onClick events, make sure they don't override eachother. This should maybe be expanded to handle all function attributes
+              const interactionProps = {}
+
+              if (tdProps.rest.onClick) {
+                interactionProps.onClick = e => {
+                  tdProps.rest.onClick(e, () => onExpanderClick(e))
+                }
+              }
+
+              if (columnProps.rest.onClick) {
+                interactionProps.onClick = e => {
+                  columnProps.rest.onClick(e, () => onExpanderClick(e))
+                }
+              }
+
               // Return the cell
               return (
                 <TdComponent
@@ -709,9 +717,9 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
                     width: _.asPx(width),
                     maxWidth: _.asPx(maxWidth),
                   }}
-                  {...interactionProps}
                   {...tdProps.rest}
                   {...columnProps.rest}
+                  {...interactionProps}
                 >
                   {resolvedCell}
                 </TdComponent>
diff --git a/src/utils.js b/src/utils.js
@@ -145,7 +145,7 @@ function groupBy (xs, key) {
 
 function asPx (value) {
   value = Number(value)
-  return (Number.isNaN(value)) ? null : value + 'px'
+  return Number.isNaN(value) ? null : value + 'px'
 }
 
 function isArray (a) {
@@ -179,7 +179,7 @@ function splitProps ({ className, style, ...rest }) {
   return {
     className,
     style,
-    rest,
+    rest: rest || {},
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -145,7 +145,7 @@ function groupBy (xs, key) {`
`145`	`145`
`146`	`146`	`function asPx (value) {`
`147`	`147`	`value = Number(value)`
`148`		`- return (Number.isNaN(value)) ? null : value + 'px'`
	`148`	`+ return Number.isNaN(value) ? null : value + 'px'`
`149`	`149`	`}`
`150`	`150`
`151`	`151`	`function isArray (a) {`
`@@ -179,7 +179,7 @@ function splitProps ({ className, style, ...rest }) {`
`179`	`179`	`return {`
`180`	`180`	`className,`
`181`	`181`	`style,`
`182`		`- rest,`
	`182`	`+ rest: rest \|\| {},`
`183`	`183`	`}`
`184`	`184`	`}`
`185`	`185`