move onHeaderClick to FlexTable props and pass it the clicked column's dataKey

Author: olslash

source/FlexTable/FlexColumn.js

@@ -68,11 +68,6 @@ export default class Column extends Component {
     dataKey: PropTypes.any.isRequired,
     /** If sort is enabled for the table at large, disable it for this column */
     disableSort: PropTypes.bool,
-    /**
-    * Optional callback when this column's header is clicked.
-    * (): void
-    */
-    onHeaderClick: PropTypes.func,
     /** Flex grow style; defaults to 0 */
     flexGrow: PropTypes.number,
     /** Flex shrink style; defaults to 1 */

source/FlexTable/FlexTable.js

@@ -51,10 +51,16 @@ export default class FlexTable extends Component {
     horizontalPadding: PropTypes.number,
     /** Optional renderer to be used in place of table body rows when rowsCount is 0 */
     noRowsRenderer: PropTypes.func,
+    /**
+    * Optional callback when a column's header is clicked.
+    * (dataKey: string): void
+    */
+    onHeaderClick: PropTypes.func,
     /**
      * Callback invoked when a user clicks on a table row.
      * (rowIndex: number): void
      */
+
     onRowClick: PropTypes.func,
     /**
      * Callback invoked with information about the slice of rows that were just rendered.
@@ -97,6 +103,7 @@ export default class FlexTable extends Component {
     disableHeader: false,
     horizontalPadding: 0,
     noRowsRenderer: () => null,
+    onHeaderClick: () => null,
     onRowClick: () => null,
     onRowsRendered: () => null,
     verticalPadding: 0
@@ -237,9 +244,9 @@ export default class FlexTable extends Component {
   }
 
   _createHeader (column, columnIndex) {
-    const { headerClassName, sort, sortBy, sortDirection } = this.props
+    const { headerClassName, onHeaderClick, sort, sortBy, sortDirection } = this.props
     const { styleSheet } = this.state
-    const { dataKey, disableSort, label, onHeaderClick } = column.props
+    const { dataKey, disableSort, label } = column.props
     const showSortIndicator = sortBy === dataKey
     const sortEnabled = !disableSort && sort
 
@@ -263,7 +270,7 @@ export default class FlexTable extends Component {
       : SortDirection.DESC
     const onClick = () => {
       sortEnabled && sort(dataKey, newSortDirection)
-      onHeaderClick()
+      onHeaderClick(dataKey)
     }
 
     return (

source/FlexTable/FlexTable.test.js

@@ -44,8 +44,8 @@ describe('FlexTable', () => {
     headerClassName = undefined,
     headerHeight = 20,
     height = 100,
-    onHeaderClick = undefined,
     noRowsRenderer = undefined,
+    onHeaderClick = undefined,
     onRowClick = undefined,
     onRowsRendered = undefined,
     rowClassName = undefined,
@@ -66,6 +66,7 @@ describe('FlexTable', () => {
         headerHeight={headerHeight}
         height={height}
         noRowsRenderer={noRowsRenderer}
+        onHeaderClick={onHeaderClick}
         onRowClick={onRowClick}
         onRowsRendered={onRowsRendered}
         rowClassName={rowClassName}
@@ -85,8 +86,6 @@ describe('FlexTable', () => {
           cellRenderer={cellRenderer}
           cellDataGetter={cellDataGetter}
           disableSort={disableSort}
-          onHeaderClick={onHeaderClick}
-
         />
         <FlexColumn
           label='Email'
@@ -329,30 +328,32 @@ describe('FlexTable', () => {
   })
 
   describe('onHeaderClick', () => {
-    it('should call :onHeaderClick when a column header is clicked and sorting is disabled', () => {
-      let onHeaderClickCalls = 0
+    it('should call :onHeaderClick with the correct arguments when a column header is clicked and sorting is disabled', () => {
+      let onHeaderClickCalls = []
       const table = renderTable({
         disableSort: true,
-        onHeaderClick: () => onHeaderClickCalls++
+        onHeaderClick: (dataKey) => onHeaderClickCalls.push({dataKey})
       })
       const tableDOMNode = findDOMNode(table)
       const nameColumn = tableDOMNode.querySelector('.FlexTable__headerColumn:first-of-type')
 
       Simulate.click(nameColumn)
-      expect(onHeaderClickCalls).toEqual(1)
+      expect(onHeaderClickCalls.length).toEqual(1)
+      expect(onHeaderClickCalls[0].dataKey).toEqual('name')
     })
 
-    it('should call :onHeaderClick when a column header is clicked and sorting is enabled', () => {
-      let onHeaderClickCalls = 0
+    it('should call :onHeaderClick with the correct arguments when a column header is clicked and sorting is enabled', () => {
+      let onHeaderClickCalls = []
       const table = renderTable({
         disableSort: false,
-        onHeaderClick: () => onHeaderClickCalls++
+        onHeaderClick: (dataKey) => onHeaderClickCalls.push({dataKey})
       })
       const tableDOMNode = findDOMNode(table)
       const nameColumn = tableDOMNode.querySelector('.FlexTable__headerColumn:first-of-type')
 
       Simulate.click(nameColumn)
-      expect(onHeaderClickCalls).toEqual(1)
+      expect(onHeaderClickCalls.length).toEqual(1)
+      expect(onHeaderClickCalls[0].dataKey).toEqual('name')
     })
   })