Fixed #4795 - v2 DataTable: Frozen column improvements

primefaces · Nov 10, 2023 · 52f5c5a · 52f5c5a
1 parent 4dd5b46
commit 52f5c5a
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 4 deletions.
diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue
@@ -343,7 +343,7 @@ export default {
                 let align = this.columnProp('alignFrozen');
                 if (align === 'right') {
                     let right = 0;
-                    let next = this.$el.nextElementSibling;
+                    let next = DomHandler.getNextElementSibling(this.$el, '.p-frozen-column');
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }

diff --git a/src/components/datatable/FooterCell.vue b/src/components/datatable/FooterCell.vue
@@ -45,7 +45,7 @@ export default {
                 let align = this.columnProp('alignFrozen');
                 if (align === 'right') {
                     let right = 0;
-                    let next = this.$el.nextElementSibling;
+                    let next = DomHandler.getNextElementSibling(this.$el, '.p-frozen-column');
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.left);
                     }

diff --git a/src/components/datatable/HeaderCell.vue b/src/components/datatable/HeaderCell.vue
@@ -155,15 +155,15 @@ export default {
                 let align = this.columnProp('alignFrozen');
                 if (align === 'right') {
                     let right = 0;
-                    let next = this.$el.nextElementSibling;
+                    let next = DomHandler.getNextElementSibling(this.$el, '.p-frozen-column');
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
                     this.styleObject.right = right + 'px';
                 }
                 else {
                     let left = 0;
-                    let prev = this.$el.previousElementSibling;
+                    let prev = DomHandler.getPreviousElementSibling(this.$el, '.p-frozen-column');
                     if (prev) {
                         left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }

diff --git a/src/components/utils/DomHandler.js b/src/components/utils/DomHandler.js
@@ -480,6 +480,34 @@ export default class DomHandler {
         return focusableElements.length > 0 ? focusableElements[0] : null;
     }
 
+    static getPreviousElementSibling(element, selector) {
+        let previousElement = element.previousElementSibling;
+
+        while (previousElement) {
+            if (previousElement.matches(selector)) {
+                return previousElement;
+            } else {
+                previousElement = previousElement.previousElementSibling;
+            }
+        }
+
+        return null;
+    }
+
+    static getNextElementSibling(element, selector) {
+        let nextElement = element.nextElementSibling;
+
+        while (nextElement) {
+            if (nextElement.matches(selector)) {
+                return nextElement;
+            } else {
+                nextElement = nextElement.nextElementSibling;
+            }
+        }
+
+        return null;
+    }
+
     static isClickable(element) {
         const targetNode = element.nodeName;
         const parentNode = element.parentElement && element.parentElement.nodeName;

diff --git a/src/components/utils/Utils.d.ts b/src/components/utils/Utils.d.ts
@@ -44,6 +44,8 @@ export declare class DomHandler {
     static invokeElementMethod(el: HTMLElement, methodName: string, args: any): void;
     static getFocusableElements(el: HTMLElement): any[];
     static getFirstFocusableElement(el: HTMLElement): any;
+    static getPreviousElementSibling(el: HTMLElement, selector?: string): any;
+    static getNextElementSibling(el: HTMLElement, selector?: string): any;
     static isClickable(el: HTMLElement): boolean;
     static applyStyle(el: HTMLElement, style: any): void;
     static isIOS(): boolean;