From 5f870bdf7a3038d83fdb480b7d0a4368d86ef9f1 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 10 Feb 2021 13:49:36 +0300
Subject: [PATCH] Support to freeze cells on the right

---
 public/demo/menu/menu.json                  |  7 ++++--
 src/AppMenu.vue                             | 10 ++++++--
 src/components/column/Column.vue            |  4 ++++
 src/components/datatable/BodyCell.vue       | 26 ++++++++++++++-------
 src/components/datatable/DataTable.vue      |  2 +-
 src/components/datatable/FooterCell.vue     | 26 ++++++++++++++-------
 src/components/datatable/HeaderCell.vue     | 26 ++++++++++++++-------
 src/views/datatable/DataTableScrollDemo.vue | 24 +++++++++----------
 8 files changed, 81 insertions(+), 44 deletions(-)

diff --git a/public/demo/menu/menu.json b/public/demo/menu/menu.json
index b6d9c112a..f9ac4e2a4 100644
--- a/public/demo/menu/menu.json
+++ b/public/demo/menu/menu.json
@@ -255,6 +255,7 @@
                 {
                     "name": "DataTable",
                     "meta": ["datatable"],
+                    "badge": "New",
                     "children": [
                         {
                             "name": "Documentation",
@@ -298,7 +299,8 @@
                         },
                         {
                             "name": "Filter",
-                            "to": "/datatable/filter"
+                            "to": "/datatable/filter",
+                            "badge": "New"
                         },
                         {
                             "name": "Selection",
@@ -310,7 +312,8 @@
                         },
                         {
                             "name": "Scroll",
-                            "to": "/datatable/scroll"
+                            "to": "/datatable/scroll",
+                            "badge": "New"
                         },
                         {
                             "name": "FlexScroll",
diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index b12af6df8..309b98647 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -13,12 +13,18 @@
                         <template v-if="child.children">
                            <router-link :to="child.children[0].to" v-slot="{isActive}" custom>
                                 <div>
-                                    <a tabindex="0" @click="toggleSubmenu($event, child.meta[0])">{{child.name}}</a>
+                                    <a tabindex="0" @click="toggleSubmenu($event, child.meta[0])">
+                                        {{child.name}}
+                                        <Tag v-if="child.badge" :value="child.badge"></Tag>
+                                    </a>
                                     <transition name="p-toggleable-content">
                                         <div class="p-toggleable-content" v-show="isSubmenuActive(child.meta[0], isActive)">
                                             <ul>
                                                 <li v-for="(submenuitem, i) of child.children" :key="i">
-                                                    <router-link :to="submenuitem.to">{{submenuitem.name}}</router-link>
+                                                    <router-link :to="submenuitem.to">
+                                                        {{submenuitem.name}}
+                                                        <Tag v-if="submenuitem.badge" :value="submenuitem.badge"></Tag>
+                                                    </router-link>
                                                 </li>
                                             </ul>
                                         </div>
diff --git a/src/components/column/Column.vue b/src/components/column/Column.vue
index b64b0d7c8..cb9df50ee 100755
--- a/src/components/column/Column.vue
+++ b/src/components/column/Column.vue
@@ -158,6 +158,10 @@ export default {
             type: Boolean,
             default: false
         },
+        alignFrozen: {
+            type: String,
+            default: 'left'
+        },
         exportable: {
             type: Boolean,
             default: true
diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue
index 0998cfa33..65e916ece 100755
--- a/src/components/datatable/BodyCell.vue
+++ b/src/components/datatable/BodyCell.vue
@@ -74,9 +74,7 @@ export default {
     data() {
         return {
             d_editing: this.editing,
-            styleObject: {
-                left: '0px'
-            }
+            styleObject: {}
         }
     },
     watch: {
@@ -280,13 +278,23 @@ export default {
         },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
-                let left = 0;
-                let prev = this.$el.previousElementSibling;
-                if (prev) {
-                    left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
+                let align = this.columnProp('alignFrozen');
+                if (align === 'right') {
+                    let right = 0;
+                    let next = this.$el.nextElementSibling;
+                    if (next) {
+                        right = DomHandler.getOuterWidth(next) + parseFloat(next.style.left);
+                    }
+                    this.styleObject.right = right + 'px';
+                }
+                else {
+                    let left = 0;
+                    let prev = this.$el.previousElementSibling;
+                    if (prev) {
+                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
+                    }
+                    this.styleObject.left = left + 'px';
                 }
-
-                this.styleObject.left = left + 'px';
             }
         }
     },
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 907566f66..ba52df3c6 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -24,7 +24,7 @@
                         @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)"
                         @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
-                <DTTableBody :value="frozenValue" :frozenRow="true" class="p-datatable-frozen-tbody" :columns="columns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
+                <DTTableBody v-if="frozenValue" :value="frozenValue" :frozenRow="true" class="p-datatable-frozen-tbody" :columns="columns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
                     :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
                     :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
                     :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :loading="loading"
diff --git a/src/components/datatable/FooterCell.vue b/src/components/datatable/FooterCell.vue
index a176107bd..4a0132d65 100644
--- a/src/components/datatable/FooterCell.vue
+++ b/src/components/datatable/FooterCell.vue
@@ -18,9 +18,7 @@ export default {
     },
     data() {
         return {
-            styleObject: {
-                left: '0px'
-            }
+            styleObject: {}
         }
     },
     mounted() {
@@ -39,13 +37,23 @@ export default {
         },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
-                let left = 0;
-                let prev = this.$el.previousElementSibling;
-                if (prev) {
-                    left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
+                let align = this.columnProp('alignFrozen');
+                if (align === 'right') {
+                    let right = 0;
+                    let next = this.$el.nextElementSibling;
+                    if (next) {
+                        right = DomHandler.getOuterWidth(next) + parseFloat(next.style.left);
+                    }
+                    this.styleObject.right = right + 'px';
+                }
+                else {
+                    let left = 0;
+                    let prev = this.$el.previousElementSibling;
+                    if (prev) {
+                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
+                    }
+                    this.styleObject.left = left + 'px';
                 }
-
-                this.styleObject.left = left + 'px';
             }
         }
     },
diff --git a/src/components/datatable/HeaderCell.vue b/src/components/datatable/HeaderCell.vue
index eea9074a0..4773250ce 100644
--- a/src/components/datatable/HeaderCell.vue
+++ b/src/components/datatable/HeaderCell.vue
@@ -83,9 +83,7 @@ export default {
     },
     data() {
         return {
-            styleObject: {
-                left: '0px'
-            }
+            styleObject: {}
         }
     },
     mounted() {
@@ -149,13 +147,23 @@ export default {
         },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
-                let left = 0;
-                let prev = this.$el.previousElementSibling;
-                if (prev) {
-                    left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
+                let align = this.columnProp('alignFrozen');
+                if (align === 'right') {
+                    let right = 0;
+                    let next = this.$el.nextElementSibling;
+                    if (next) {
+                        right = DomHandler.getOuterWidth(next) + parseFloat(next.style.left);
+                    }
+                    this.styleObject.right = right + 'px';
+                }
+                else {
+                    let left = 0;
+                    let prev = this.$el.previousElementSibling;
+                    if (prev) {
+                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
+                    }
+                    this.styleObject.left = left + 'px';
                 }
-
-                this.styleObject.left = left + 'px';
             }
         },
         onHeaderCheckboxChange(event) {
diff --git a/src/views/datatable/DataTableScrollDemo.vue b/src/views/datatable/DataTableScrollDemo.vue
index 74e39a43f..f5ec1ca18 100755
--- a/src/views/datatable/DataTableScrollDemo.vue
+++ b/src/views/datatable/DataTableScrollDemo.vue
@@ -98,24 +98,24 @@
             <div class="card">
                 <h5>Frozen Columns</h5>
                 <DataTable :value="customers" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both">
-                    <Column field="name" header="Name" :style="{width:'250px'}" frozen>
+                    <Column field="name" header="Name" :style="{width:'200px'}" frozen>
                         <template #body="slotProps">
-                            <span style="font-weight: 700">{{slotProps.data.name}}</span>
+                            <span class="p-text-bold">{{slotProps.data.name}}</span>
                         </template>
                     </Column>
-                    <Column field="id" header="Id" :style="{width:'250px'}"></Column>
-                    <Column field="name" header="Name" :style="{width:'250px'}"></Column>
-                    <Column field="country.name" header="Country" :style="{width:'250px'}"></Column>
-                    <Column field="date" header="Date" :style="{width:'250px'}"></Column>
-                    <Column field="balance" header="Balance" :style="{width:'250px'}">
+                    <Column field="id" header="Id" :style="{width:'200px'}"></Column>
+                    <Column field="name" header="Name" :style="{width:'200px'}"></Column>
+                    <Column field="country.name" header="Country" :style="{width:'200px'}"></Column>
+                    <Column field="date" header="Date" :style="{width:'200px'}"></Column>
+                    <Column field="company" header="Company" :style="{width:'200px'}"></Column>
+                    <Column field="status" header="Status" :style="{width:'200px'}"></Column>
+                    <Column field="activity" header="Activity" :style="{width:'200px'}"></Column>
+                    <Column field="representative.name" header="Representative" :style="{width:'200px'}"></Column>
+                    <Column field="balance" header="Balance" :style="{width:'200px'}" frozen alignFrozen="right">
                         <template #body="{data}">
-                            {{formatCurrency(data.balance)}}
+                             <span class="p-text-bold">{{formatCurrency(data.balance)}}</span>
                         </template>
                     </Column>
-                    <Column field="company" header="Company" :style="{width:'250px'}"></Column>
-                    <Column field="status" header="Status" :style="{width:'250px'}"></Column>
-                    <Column field="activity" header="Activity" :style="{width:'250px'}"></Column>
-                    <Column field="representative.name" header="Representative" :style="{width:'250px'}"></Column>
                 </DataTable>
             </div>
 		</div>