From aae26c3db144306f8e0432d3815b5ee1fff276c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Thu, 2 Jun 2022 16:28:12 +0300
Subject: [PATCH] Fixed #2620 - DataTable | new 'p-reorderable-column' class
 and reorderable columns cursor update

---
 src/components/datatable/DataTable.vue   | 7 ++++++-
 src/components/datatable/HeaderCell.vue  | 9 +++++++--
 src/components/datatable/TableHeader.vue | 6 +++++-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 3261d25a3..efbeaff32 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -22,7 +22,7 @@
                 <template #content="slotProps">
                     <table ref="table" role="table" :class="[tableClass, 'p-datatable-table']" :style="[tableStyle, slotProps.spacerStyle]">
                         <DTTableHeader :columnGroup="headerColumnGroup" :columns="slotProps.columns" :rowGroupMode="rowGroupMode"
-                                :groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
+                                :groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :reorderableColumns="reorderableColumns" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
                                 :sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta" :filters="d_filters" :filtersStore="filters" :filterDisplay="filterDisplay"
                                 @column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)" @filter-change="onFilterChange" @filter-apply="onFilterApply"
                                 @column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
@@ -2133,6 +2133,11 @@ export default {
     display: none;
 }
 
+.p-reorderable-column,
+.p-datatable-reorderablerow-handle {
+    cursor: move;
+}
+
 /* Loader */
 .p-datatable .p-datatable-loading-overlay {
     position: absolute;
diff --git a/src/components/datatable/HeaderCell.vue b/src/components/datatable/HeaderCell.vue
index 66e497dce..a430e5aa9 100644
--- a/src/components/datatable/HeaderCell.vue
+++ b/src/components/datatable/HeaderCell.vue
@@ -88,6 +88,10 @@ export default {
         filterColumn: {
             type: Boolean,
             default: false
+        },
+        reorderableColumns: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -95,7 +99,7 @@ export default {
             styleObject: {}
         }
     },
-    mounted() {
+    mounted() {console.log(this.reorderableColumns)
         if (this.columnProp('frozen')) {
             this.updateStickyPosition();
         }
@@ -188,7 +192,8 @@ export default {
                     'p-resizable-column': this.resizableColumns,
                     'p-highlight': this.isColumnSorted(),
                     'p-filter-column': this.filterColumn,
-                    'p-frozen-column': this.columnProp('frozen')
+                    'p-frozen-column': this.columnProp('frozen'),
+                    'p-reorderable-column': this.reorderableColumns
             }];
         },
         containerStyle() {
diff --git a/src/components/datatable/TableHeader.vue b/src/components/datatable/TableHeader.vue
index b5c6a568f..b50e0289f 100755
--- a/src/components/datatable/TableHeader.vue
+++ b/src/components/datatable/TableHeader.vue
@@ -6,7 +6,7 @@
                     <DTHeaderCell v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field')))" :column="col"
                     @column-click="$emit('column-click', $event)" @column-mousedown="$emit('column-mousedown', $event)"
                     @column-dragstart="$emit('column-dragstart', $event)" @column-dragover="$emit('column-dragover', $event)" @column-dragleave="$emit('column-dragleave', $event)" @column-drop="$emit('column-drop', $event)"
-                    :groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :resizableColumns="resizableColumns" @column-resizestart="$emit('column-resizestart', $event)"
+                    :groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :reorderableColumns="reorderableColumns" :resizableColumns="resizableColumns" @column-resizestart="$emit('column-resizestart', $event)"
                     :sortMode="sortMode" :sortField="sortField" :sortOrder="sortOrder" :multiSortMeta="multiSortMeta"
                     :allRowsSelected="allRowsSelected" :empty="empty" @checkbox-change="$emit('checkbox-change', $event)"
                     :filters="filters" :filterDisplay="filterDisplay" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
@@ -118,6 +118,10 @@ export default {
         filtersStore: {
             type: Object,
             default: null
+        },
+        reorderableColumns: {
+            type: Boolean,
+            default: false
         }
     },
     methods: {