bug fix for hidden columns throwing off reorder calculations

Author: patricktr

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 1.2.3 (2020-4-10)
+
+Bug fix that prevented `onDraggedColumnChange` from being called if columns dragged back to their original order
+Bug fix for column re-ordering not working if any of the React Table columns have `show: false` defined
+
 # 1.2.2 (2020-1-17)
 
 Bug fix that prevented sorting on a draggable column

README.md

@@ -58,6 +58,12 @@ render () {
 }
 ```
 
+## Special Considerations
+
+If any of your React Table columns are hidden (show: false), this HOC will automatically move those columns to the end of the list. This is to prevent hidden columns from causing this HOC from improperly calculating the new column order.
+
+ReactTable Columns Props [https://github.com/tannerlinsley/react-table/tree/v6.10.0#columns]
+
 ## draggableColumns Prop
 
 | Property                        | Description                                                                                                                                             | Default value        | Type             | Required |

src/dom-helper.js

@@ -21,6 +21,11 @@ const index = element => {
   return -1
 }
 
+const getAttribute = (element, attributeName) => {
+  console.log('getattr', element)
+  return element.getAttribute(attributeName)
+}
+
 const addClass = (element, className) => {
   if (element.classList) element.classList.add(className)
   else element.className += ' ' + className
@@ -104,6 +109,7 @@ export default {
   parseStrDimensionToInt,
   getOffset,
   index,
+  getAttribute,
   addClass,
   removeClass,
   hasClass,

src/index.js

@@ -52,17 +52,26 @@ export default Component => {
 
     // helper methods
     findParentHeader(element) {
-      if (element.className.includes('rt-th')) {
+      // need to check typeof to avoid errors when traversing special elements like SVGs
+      if (element.className && typeof element.className === 'string' && element.className.includes('rt-th')) {
         return element
       } else {
         let parent = element.parentElement
-        while (!parent.className.includes('rt-th')) {
+        while (typeof parent.className !== 'string' || !parent.className.includes('rt-th')) {
           parent = parent.parentElement
           if (!parent) break
         }
         return parent
       }
     }
+
+    getFirstChildWithColumnIndexAttributeValue(element) {
+      const header = DomHelper.findFirstChildWithClassName(element, 'draggable-header')
+
+      if (header) {
+        return DomHelper.getAttribute(header, 'data-column-index')
+      }
+    }
     // end helper methods
 
     createDragEvents() {
@@ -288,6 +297,10 @@ export default Component => {
               // only move if the dragged column is meets position threshold
               let dragIndex = DomHelper.index(this.draggedColumn)
               let dropIndex = DomHelper.index(this.findParentHeader(e.target))
+
+              // for the future
+              // this.getFirstChildWithColumnIndexAttributeValue(this.draggedColumn)
+
               let allowDrop = dragIndex !== dropIndex
 
               if (
@@ -312,6 +325,8 @@ export default Component => {
                   }
                 }
 
+                console.log('ddropIndex', dropIndex, 'this.dragged', this.dragged)
+
                 this.reorder.push({ a: dropIndex, b: this.dragged })
 
                 if (onDropSuccess) {
@@ -408,7 +423,7 @@ export default Component => {
     };
 
     render() {
-      const { columns, draggableColumns, ...rest } = this.props
+      const { columns: origColumns, draggableColumns, ...rest } = this.props
       const {
         draggable = defaultProps.draggable,
         mode = defaultProps.mode,
@@ -437,7 +452,15 @@ export default Component => {
         />
       )
 
-      const cols = columns.map(col => {
+      // separate out visible and hidden columns
+      const visibleColumns = origColumns.filter(col => col.show === true || col.show === undefined)
+      const hiddenColumns = origColumns.filter(col => col.show === false)
+
+      // place hidden columns at very end of array
+      // having a hidden column inbetween two draggable columns will cause this HOC to improperly calculate the new column index positions
+      const adjustedOrigColumns = [...visibleColumns, ...hiddenColumns]
+
+      const cols = adjustedOrigColumns.map((col, index) => {
         let headerClassName = `${this.uniqueId} draggable-header`
 
         // add additional className if column is draggable enabled
@@ -452,17 +475,19 @@ export default Component => {
           ...col,
           Header:
             typeof col.Header === 'function' ? (
-              <div className={headerClassName}>
+              <div className={headerClassName} data-column-index={index}>
                 {col.Header()}
               </div>
             ) : (
-              <div className={headerClassName}>
+              <div className={headerClassName} data-column-index={index}>
                 {col.Header}
               </div>
             )
         }
       })
 
+      const previousOrder = [...this.currentColumnOrder]
+
       // run all reorder events
       if (mode && mode === DragMode.SWAP) {
         this.reorder.forEach(o => (cols[o.a] = cols.splice(o.b, 1, cols[o.a])[0]))
@@ -476,7 +501,7 @@ export default Component => {
 
       // fire change event?
       if (!this.state.firstLoad) {
-        const originalOrder = columns.map(col => {
+        const originalOrder = previousOrder.map(col => {
           if (typeof col.accessor === 'function') return col.id
           return col.accessor
         })