diff --git a/README.md b/README.md index 7a72883..61e7753 100644 --- a/README.md +++ b/README.md @@ -593,12 +593,21 @@ This makes it extremely easy to add, say... a row click callback! { 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 index 6f89a9d..3adcb49 100644 --- 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 ( {resolvedCell} diff --git a/src/utils.js b/src/utils.js index e700aee..3f173de 100644 --- 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 || {}, } }