Bug fix that prevented sorting on a draggable column

Bug fix for `enableColumnWideDrag` prop by adding css `display: inline-flex` when set to {false}

Author: patricktr

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 1.2.2 (2020-1-17)
+
+Bug fix that prevented sorting on a draggable column
+Bug fix for `enableColumnWideDrag` prop by adding css `display: inline-flex` when set to {false}
+
 # 1.2.1 (2019-10-9)
 
 Bug fix for correctly converting a HTML Collection to Javascript array (was broken for some browsers)

example/src/stories/index.js

@@ -27,7 +27,7 @@ stories.add('Reorder Columns', () => {
       draggableColumns={{
         mode: DragMode.REORDER,
         draggable: text('draggable', ['vin', 'year', 'brand', 'color']),
-        enableColumnWideDrag: boolean('enableColumnWideDrag', true),
+        enableColumnWideDrag: boolean('enableColumnWideDrag', false),
         disableTableScroll: boolean('disableTableScroll', true),
         useDragImage: boolean('useDragImage', true),
         onDraggedColumnChange: cols => console.log('new order', cols),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table-hoc-draggable-columns",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "ReactTable HOC for draggable columns",
   "author": "patricktran",
   "license": "MIT",

src/index.js

@@ -452,11 +452,11 @@ export default Component => {
           ...col,
           Header:
             typeof col.Header === 'function' ? (
-              <div onClick={this.stopPropagation} className={headerClassName}>
+              <div className={headerClassName}>
                 {col.Header()}
               </div>
             ) : (
-              <div onClick={this.stopPropagation} className={headerClassName}>
+              <div className={headerClassName}>
                 {col.Header}
               </div>
             )

src/styles.scss

@@ -16,6 +16,11 @@
     padding: 2px 8px;
   }
 
+  //css for when `enableColumnWideDrag` prop is set to {false}
+  div[draggable='true'].draggable-header.enable-drag {
+    display: inline-flex;
+  }
+
   .draggable-header.enable-drag:hover {
     cursor: move;
   }