Fixed #2392 - DataTable VirtualScroll alignment issue

primefaces · Nov 5, 2021 · 9372296 · 9372296
1 parent e9137c6
commit 9372296
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/src/components/datatable/TableBody.js b/src/components/datatable/TableBody.js
@@ -237,13 +237,18 @@ export class TableBody extends Component {
     }
 
     updateFrozenRowGroupHeaderStickyPosition() {
-        let tableHeaderHeight = DomHandler.getOuterHeight(this.el.previousElementSibling);
-        let top = tableHeaderHeight + 'px';
+        const tableHeaderHeight = DomHandler.getOuterHeight(this.el.previousElementSibling);
+        const top = tableHeaderHeight + 'px';
         if (this.state.rowGroupHeaderStyleObject && this.state.rowGroupHeaderStyleObject.top !== top) {
             this.setState({ rowGroupHeaderStyleObject: { top } })
         }
     }
 
+    updateVirtualScrollerPosition() {
+        const tableHeaderHeight = DomHandler.getOuterHeight(this.el.previousElementSibling);
+        this.el.style.top = (this.el.style.top || 0) + tableHeaderHeight + 'px';
+    }
+
     onSingleSelection({ originalEvent, data, toggleable, type }) {
         let selected = this.isSelected(data);
         let selection = this.props.selection;
@@ -776,8 +781,7 @@ export class TableBody extends Component {
         }
 
         if (!this.props.isVirtualScrollerDisabled && this.getVirtualScrollerOption('vertical')) {
-            let style = getComputedStyle(this.el);
-            this.el.style.top = parseFloat(style.top) + parseFloat(this.props.virtualScrollerOptions.itemSize) + 'px';
+            this.updateVirtualScrollerPosition();
         }
     }
 
@@ -791,8 +795,7 @@ export class TableBody extends Component {
         }
 
         if (!this.props.isVirtualScrollerDisabled && this.getVirtualScrollerOption('vertical') && this.getVirtualScrollerOption('itemSize', prevProps.virtualScrollerOptions) !== this.getVirtualScrollerOption('itemSize')) {
-            let style = getComputedStyle(this.el);
-            this.el.style.top = parseFloat(style.top) + parseFloat(this.getVirtualScrollerOption('itemSize')) - parseFloat(this.getVirtualScrollerOption('itemSize', prevProps.virtualScrollerOptions)) + 'px';
+            this.updateVirtualScrollerPosition();
         }
     }
 

diff --git a/src/components/virtualscroller/VirtualScroller.js b/src/components/virtualscroller/VirtualScroller.js
@@ -326,8 +326,8 @@ export class VirtualScroller extends Component {
             const itemSize = this.props.itemSize;
             const calculateTranslateVal = (_first, _size) => (_first * _size);
             const setTransform = (_x = 0, _y = 0) => {
+                this.sticky && (this.sticky.style.top = `-${_y}px`);
                 this.content.style.transform = `translate3d(${_x}px, ${_y}px, 0)`;
-                this.sticky && (this.sticky.style.top = `${_y}px`);
             };
 
             if (isBoth) {