From e5af2d3ad059f58eddf1c4fbb302918105359a9b Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Fri, 20 Dec 2024 12:52:25 +0300 Subject: [PATCH] Fixed #6982 - DataTable: Frozen Columns, headers are overlapping wrongly --- packages/primevue/src/datatable/BodyCell.vue | 4 ++-- packages/primevue/src/datatable/FooterCell.vue | 4 ++-- packages/primevue/src/datatable/HeaderCell.vue | 8 ++++---- packages/primevue/src/treetable/BodyCell.vue | 4 ++-- packages/primevue/src/treetable/FooterCell.vue | 4 ++-- packages/primevue/src/treetable/HeaderCell.vue | 8 ++++---- 6 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/primevue/src/datatable/BodyCell.vue b/packages/primevue/src/datatable/BodyCell.vue index 4a74cff52..ac8db308d 100755 --- a/packages/primevue/src/datatable/BodyCell.vue +++ b/packages/primevue/src/datatable/BodyCell.vue @@ -496,7 +496,7 @@ export default { let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]'); if (next) { - pos = getOuterWidth(next) + parseFloat(next.style.right || 0); + pos = getOuterWidth(next) + parseFloat(next.style['inset-inline-end'] || 0); } this.styleObject.insetInlineEnd = pos + 'px'; @@ -505,7 +505,7 @@ export default { let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]'); if (prev) { - pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0); + pos = getOuterWidth(prev) + parseFloat(prev.style['inset-inline-start'] || 0); } this.styleObject.insetInlineStart = pos + 'px'; diff --git a/packages/primevue/src/datatable/FooterCell.vue b/packages/primevue/src/datatable/FooterCell.vue index 53fc7b83b..90cfc86b5 100644 --- a/packages/primevue/src/datatable/FooterCell.vue +++ b/packages/primevue/src/datatable/FooterCell.vue @@ -73,7 +73,7 @@ export default { let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]'); if (next) { - pos = getOuterWidth(next) + parseFloat(next.style.right || 0); + pos = getOuterWidth(next) + parseFloat(next.style['inset-inline-end'] || 0); } this.styleObject.insetInlineEnd = pos + 'px'; @@ -82,7 +82,7 @@ export default { let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]'); if (prev) { - pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0); + pos = getOuterWidth(prev) + parseFloat(prev.style['inset-inline-start'] || 0); } this.styleObject.insetInlineStart = pos + 'px'; diff --git a/packages/primevue/src/datatable/HeaderCell.vue b/packages/primevue/src/datatable/HeaderCell.vue index 26e7db576..42a887ac7 100644 --- a/packages/primevue/src/datatable/HeaderCell.vue +++ b/packages/primevue/src/datatable/HeaderCell.vue @@ -283,7 +283,7 @@ export default { let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]'); if (next) { - pos = getOuterWidth(next) + parseFloat(next.style.right || 0); + pos = getOuterWidth(next) + parseFloat(next.style['inset-inline-end'] || 0); } this.styleObject.insetInlineEnd = pos + 'px'; @@ -292,7 +292,7 @@ export default { let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]'); if (prev) { - pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0); + pos = getOuterWidth(prev) + parseFloat(prev.style['inset-inline-start'] || 0); } this.styleObject.insetInlineStart = pos + 'px'; @@ -304,8 +304,8 @@ export default { let index = getIndex(this.$el); if (filterRow.children[index]) { - filterRow.children[index].style.left = this.styleObject.left; - filterRow.children[index].style.right = this.styleObject.right; + filterRow.children[index].style['inset-inline-start'] = this.styleObject['inset-inline-start']; + filterRow.children[index].style['inset-inline-end'] = this.styleObject['inset-inline-end']; } } } diff --git a/packages/primevue/src/treetable/BodyCell.vue b/packages/primevue/src/treetable/BodyCell.vue index 5bff37418..9f60c61be 100644 --- a/packages/primevue/src/treetable/BodyCell.vue +++ b/packages/primevue/src/treetable/BodyCell.vue @@ -179,7 +179,7 @@ export default { let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]'); if (next) { - pos = getOuterWidth(next) + parseFloat(next.style.right || 0); + pos = getOuterWidth(next) + parseFloat(next.style['inset-inline-end'] || 0); } this.styleObject.insetInlineEnd = pos + 'px'; @@ -188,7 +188,7 @@ export default { let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]'); if (prev) { - pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0); + pos = getOuterWidth(prev) + parseFloat(prev.style['inset-inline-start'] || 0); } this.styleObject.insetInlineStart = pos + 'px'; diff --git a/packages/primevue/src/treetable/FooterCell.vue b/packages/primevue/src/treetable/FooterCell.vue index 0a6c2cce9..69199fcc6 100644 --- a/packages/primevue/src/treetable/FooterCell.vue +++ b/packages/primevue/src/treetable/FooterCell.vue @@ -73,7 +73,7 @@ export default { let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]'); if (next) { - pos = getOuterWidth(next) + parseFloat(next.style.right || 0); + pos = getOuterWidth(next) + parseFloat(next.style['inset-inline-end'] || 0); } this.styleObject.insetInlineEnd = pos + 'px'; @@ -82,7 +82,7 @@ export default { let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]'); if (prev) { - pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0); + pos = getOuterWidth(prev) + parseFloat(prev.style['inset-inline-start'] || 0); } this.styleObject.insetInlineStart = pos + 'px'; diff --git a/packages/primevue/src/treetable/HeaderCell.vue b/packages/primevue/src/treetable/HeaderCell.vue index 152c6214d..2f0f13771 100644 --- a/packages/primevue/src/treetable/HeaderCell.vue +++ b/packages/primevue/src/treetable/HeaderCell.vue @@ -122,7 +122,7 @@ export default { let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]'); if (next) { - pos = getOuterWidth(next) + parseFloat(next.style.right || 0); + pos = getOuterWidth(next) + parseFloat(next.style['inset-inline-end'] || 0); } this.styleObject.insetInlineEnd = pos + 'px'; @@ -131,7 +131,7 @@ export default { let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]'); if (prev) { - pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0); + pos = getOuterWidth(prev) + parseFloat(prev.style['inset-inline-start'] || 0); } this.styleObject.insetInlineStart = pos + 'px'; @@ -142,8 +142,8 @@ export default { if (filterRow) { let index = getIndex(this.$el); - filterRow.children[index].style.left = this.styleObject.left; - filterRow.children[index].style.right = this.styleObject.right; + filterRow.children[index].style['inset-inline-start'] = this.styleObject['inset-inline-start']; + filterRow.children[index].style['inset-inline-end'] = this.styleObject['inset-inline-end']; } } },