bindMoveColumn on every call of refreshHeader

src/columnmanager.js

@@ -30,41 +30,17 @@ export default class ColumnManager {
 
     refreshHeader() {
         const columns = this.datamanager.getColumns();
-        const $cols = $.each('.dt-cell--header', this.header);
 
-        const refreshHTML =
+        // refresh html
-            // first init
+        $('thead', this.header).innerHTML = this.getHeaderHTML(columns);
-            !$('.dt-cell', this.header) ||
-            // deleted column
-            columns.length < $cols.length;
 
-        if (refreshHTML) {
+        this.$filterRow = $('.dt-row[data-is-filter]', this.header);
-            // refresh html
+        if (this.$filterRow) {
-            $('thead', this.header).innerHTML = this.getHeaderHTML(columns);
+            $.style(this.$filterRow, { display: 'none' });
-
-            this.$filterRow = $('.dt-row[data-is-filter]', this.header);
-            if (this.$filterRow) {
-                $.style(this.$filterRow, { display: 'none' });
-            }
-        } else {
-            // update data-attributes
-            $cols.map(($col, i) => {
-                const column = columns[i];
-                // column sorted or order changed
-                // update colIndex of each header cell
-                $.data($col, {
-                    colIndex: column.colIndex
-                });
-
-                // refresh sort indicator
-                const sortIndicator = $('.sort-indicator', $col);
-                if (sortIndicator) {
-                    sortIndicator.innerHTML = this.options.sortIndicator[column.sortOrder];
-                }
-            });
         }
         // reset columnMap
         this.$columnMap = [];
+        this.bindMoveColumn();
     }
 
     getHeaderHTML(columns) {
@@ -82,7 +58,6 @@ export default class ColumnManager {
     bindEvents() {
         this.bindDropdown();
         this.bindResizeColumn();
-        this.bindMoveColumn();
         this.bindFilter();
     }
 
@@ -183,40 +158,27 @@ export default class ColumnManager {
     }
 
     bindMoveColumn() {
-        let initialized;
+        const $parent = $('.dt-row', this.header);
 
-        const initialize = () => {
+        this.sortable = Sortable.create($parent, {
-            if (initialized) {
+            onEnd: (e) => {
-                $.off(document.body, 'mousemove', initialize);
+                const {
-                return;
+                    oldIndex,
-            }
+                    newIndex
-            const ready = $('.dt-cell', this.header);
+                } = e;
-            if (!ready) return;
+                const $draggedCell = e.item;
+                const {
+                    colIndex
+                } = $.data($draggedCell);
+                if (+colIndex === newIndex) return;
 
-            const $parent = $('.dt-row', this.header);
+                this.switchColumn(oldIndex, newIndex);
-
+            },
-            this.sortable = Sortable.create($parent, {
+            preventOnFilter: false,
-                onEnd: (e) => {
+            filter: '.dt-cell__resize-handle, .dt-dropdown',
-                    const {
+            chosenClass: 'dt-cell--dragging',
-                        oldIndex,
+            animation: 150
-                        newIndex
+        });
-                    } = e;
-                    const $draggedCell = e.item;
-                    const {
-                        colIndex
-                    } = $.data($draggedCell);
-                    if (+colIndex === newIndex) return;
-
-                    this.switchColumn(oldIndex, newIndex);
-                },
-                preventOnFilter: false,
-                filter: '.dt-cell__resize-handle, .dt-dropdown',
-                chosenClass: 'dt-cell--dragging',
-                animation: 150
-            });
-        };
-
-        $.on(document.body, 'mousemove', initialize);
     }
 
     sortColumn(colIndex, nextSortOrder) {
@@ -325,11 +287,9 @@ export default class ColumnManager {
 
     setColumnWidth(colIndex, width) {
         colIndex = +colIndex;
-        this._columnWidthMap = this._columnWidthMap || [];
 
         let columnWidth = width || this.getColumn(colIndex).width;
 
-        let index = this._columnWidthMap[colIndex];
         const selector = [
             `.dt-cell__content--col-${colIndex}`,
             `.dt-cell__edit--col-${colIndex}`
@@ -339,11 +299,7 @@ export default class ColumnManager {
             width: columnWidth + 'px'
         };
 
-        index = this.style.setStyle(selector, styles, index);
+        this.style.setStyle(selector, styles);
-
-        if (index !== undefined) {
-            this._columnWidthMap[colIndex] = index;
-        }
     }
 
     setColumnHeaderWidth(colIndex) {