Fix primefaces#5508/primefaces#5487: TreeTable scrollable fixes

melloware · Dec 4, 2023 · c984b42 · c984b42
1 parent f1b9062
commit c984b42
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/components/lib/treetable/TreeTableScrollableView.js b/components/lib/treetable/TreeTableScrollableView.js
@@ -66,10 +66,10 @@ export const TreeTableScrollableView = React.memo((props) => {
             frozenScrollBody = DomHandler.findSingle(frozenView, '.p-treetable-scrollable-body');
         }
 
-        scrollHeaderBoxRef.current.style.marginLeft = -1 * scrollBodyRef.current.scrollLeft + 'px';
+        scrollHeaderBoxRef.current.style.transform = `translateX(-${scrollBodyRef.current.scrollLeft}px)`;
 
         if (scrollFooterBoxRef.current) {
-            scrollFooterBoxRef.current.style.marginLeft = -1 * scrollBodyRef.current.scrollLeft + 'px';
+            scrollFooterBoxRef.current.style.transform = `translateX(-${scrollBodyRef.current.scrollLeft}px)`;
         }
 
         if (frozenScrollBody) {
@@ -78,16 +78,20 @@ export const TreeTableScrollableView = React.memo((props) => {
     };
 
     useMountEffect(() => {
-        if (!props.frozen) {
-            const scrollBarWidth = DomHandler.calculateScrollbarWidth();
+        let el = DomHandler.find(findDataTableContainer(elementRef.current), '[data-pc-section="scrollablebody"]');
+
+        el = el.length > 1 ? el[1] : el[0];
 
+        const scrollBarWidth = DomHandler.calculateScrollbarWidth(el);
+
+        if (!props.frozen) {
             scrollHeaderBoxRef.current.style.marginRight = scrollBarWidth + 'px';
 
             if (scrollFooterBoxRef.current) {
                 scrollFooterBoxRef.current.style.marginRight = scrollBarWidth + 'px';
             }
         } else {
-            scrollBodyRef.current.style.paddingBottom = DomHandler.calculateScrollbarWidth() + 'px';
+            scrollBodyRef.current.style.paddingBottom = scrollBarWidth + 'px';
         }
     });