Support to freeze cells on the right

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",

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>

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

src/components/datatable/BodyCell.vue

@@ -74,9 +74,7 @@ export default {
     data() {
         return {
             d_editing: this.editing,
-            styleObject: {
+            styleObject: {}
-                left: '0px'
-            }
         }
     },
     watch: {
@@ -280,15 +278,25 @@ export default {
         },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
+                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';
                 }
             }
+        }
     },
     computed: {
         containerClass() {

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"

src/components/datatable/FooterCell.vue

@@ -18,9 +18,7 @@ export default {
     },
     data() {
         return {
-            styleObject: {
+            styleObject: {}
-                left: '0px'
-            }
         }
     },
     mounted() {
@@ -39,15 +37,25 @@ export default {
         },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
+                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';
                 }
             }
+        }
     },
     computed: {
         containerClass() {

src/components/datatable/HeaderCell.vue

@@ -83,9 +83,7 @@ export default {
     },
     data() {
         return {
-            styleObject: {
+            styleObject: {}
-                left: '0px'
-            }
         }
     },
     mounted() {
@@ -149,14 +147,24 @@ export default {
         },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
+                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';
                 }
+            }
         },
         onHeaderCheckboxChange(event) {
             this.$emit('checkbox-change', event);

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="id" header="Id" :style="{width:'200px'}"></Column>
-                    <Column field="name" header="Name" :style="{width:'250px'}"></Column>
+                    <Column field="name" header="Name" :style="{width:'200px'}"></Column>
-                    <Column field="country.name" header="Country" :style="{width:'250px'}"></Column>
+                    <Column field="country.name" header="Country" :style="{width:'200px'}"></Column>
-                    <Column field="date" header="Date" :style="{width:'250px'}"></Column>
+                    <Column field="date" header="Date" :style="{width:'200px'}"></Column>
-                    <Column field="balance" header="Balance" :style="{width:'250px'}">
+                    <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>