From cfa0019884d613dd36634ec488f0c19066b170e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kayla=20Aky=C3=BCz?= Date: Wed, 30 Jul 2025 11:50:27 +0300 Subject: [PATCH 1/2] fix(datatable, cell): consistency when multiple frozen columns exist and better alignment when there are non-frozen columns in between frozen columns --- components/lib/datatable/BodyRow.js | 12 +++++++++--- components/lib/datatable/FooterCell.js | 14 ++++++++++---- components/lib/datatable/HeaderCell.js | 14 ++++++++++---- 3 files changed, 29 insertions(+), 11 deletions(-) diff --git a/components/lib/datatable/BodyRow.js b/components/lib/datatable/BodyRow.js index 217f105379..3766ae0b51 100644 --- a/components/lib/datatable/BodyRow.js +++ b/components/lib/datatable/BodyRow.js @@ -512,7 +512,7 @@ export const BodyRow = React.memo((props) => { let next = elementRef.current && elementRef.current.nextElementSibling; if (next && next.classList.contains('p-frozen-column')) { - right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0); + right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0); } styleObject.right = right + 'px'; @@ -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'; diff --git a/components/lib/datatable/FooterCell.js b/components/lib/datatable/FooterCell.js index a620e72b22..233cbaf99a 100644 --- a/components/lib/datatable/FooterCell.js +++ b/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'; diff --git a/components/lib/datatable/HeaderCell.js b/components/lib/datatable/HeaderCell.js index c1adc955e0..f44460214e 100644 --- a/components/lib/datatable/HeaderCell.js +++ b/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'; From 47d182931f8059bc4e1e6881ab6f5b321c5d4da6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kayla=20Aky=C3=BCz?= Date: Wed, 30 Jul 2025 12:21:38 +0300 Subject: [PATCH 2/2] fix: run prettier --- components/lib/datatable/BodyRow.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/datatable/BodyRow.js b/components/lib/datatable/BodyRow.js index 3766ae0b51..253da78a87 100644 --- a/components/lib/datatable/BodyRow.js +++ b/components/lib/datatable/BodyRow.js @@ -512,7 +512,7 @@ export const BodyRow = React.memo((props) => { let next = elementRef.current && elementRef.current.nextElementSibling; if (next && next.classList.contains('p-frozen-column')) { - right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0); + right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0); } styleObject.right = right + 'px';