fix(datatable, cell): consistency when multiple frozen columns exist … (#8180)

* fix(datatable, cell): consistency when multiple frozen columns exist and better alignment when there are non-frozen columns in between frozen columns

* fix: run prettier

Author: kaylaa0

components/lib/datatable/BodyRow.js

@@ -520,8 +520,14 @@ export const BodyRow = React.memo((props) => {
                 let left = 0;
                 let prev = elementRef.current && elementRef.current.previousElementSibling;
 
-                if (prev && prev.classList.contains('p-frozen-column')) {
-                    left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+                while (prev) {
+                    if (prev.classList.contains('p-frozen-column')) {
+                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+                        elementRef.current.style.left = left + 'px';
+                        break;
+                    }
+
+                    prev = prev.previousElementSibling;
                 }
 
                 styleObject.left = left + 'px';

components/lib/datatable/FooterCell.js

@@ -45,7 +45,7 @@ export const FooterCell = React.memo((props) => {
 
             if (align === 'right') {
                 let right = 0;
-                let next = elementRef.current.nextElementSibling;
+                let next = elementRef.current && elementRef.current.nextElementSibling;
 
                 if (next && next.classList.contains('p-frozen-column')) {
                     right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
@@ -54,10 +54,16 @@ export const FooterCell = React.memo((props) => {
                 styleObject.right = right + 'px';
             } else {
                 let left = 0;
-                let prev = elementRef.current.previousElementSibling;
+                let prev = elementRef.current && elementRef.current.previousElementSibling;
 
-                if (prev && prev.classList.contains('p-frozen-column')) {
-                    left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+                while (prev) {
+                    if (prev && prev.classList.contains('p-frozen-column')) {
+                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+                        elementRef.current.style.left = left + 'px';
+                        break;
+                    }
+
+                    prev = prev.previousElementSibling;
                 }
 
                 styleObject.left = left + 'px';

components/lib/datatable/HeaderCell.js

@@ -106,7 +106,7 @@ export const HeaderCell = React.memo((props) => {
 
             if (align === 'right') {
                 let right = 0;
-                let next = elementRef.current.nextElementSibling;
+                let next = elementRef.current && elementRef.current.nextElementSibling;
 
                 if (next && next.classList.contains('p-frozen-column')) {
                     right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
@@ -115,10 +115,16 @@ export const HeaderCell = React.memo((props) => {
                 styleObject.right = right + 'px';
             } else {
                 let left = 0;
-                let prev = elementRef.current.previousElementSibling;
+                let prev = elementRef.current && elementRef.current.previousElementSibling;
 
-                if (prev && prev.classList.contains('p-frozen-column')) {
-                    left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+                while (prev) {
+                    if (prev && prev.classList.contains('p-frozen-column')) {
+                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+                        elementRef.current.style.left = left + 'px';
+                        break;
+                    }
+
+                    prev = prev.previousElementSibling;
                 }
 
                 styleObject.left = left + 'px';