From fb2a517838089c39d8a8252aa91698766e92c87e Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sat, 15 May 2021 13:04:59 +0300 Subject: [PATCH 1/3] Fixed #1259 - Filter column is not frozen --- src/components/datatable/HeaderCell.vue | 7 +++++++ src/components/datatable/TableHeader.vue | 4 +++- src/components/treetable/HeaderCell.vue | 7 +++++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/components/datatable/HeaderCell.vue b/src/components/datatable/HeaderCell.vue index 2a32d7d75..8cdb2ecf8 100644 --- a/src/components/datatable/HeaderCell.vue +++ b/src/components/datatable/HeaderCell.vue @@ -165,6 +165,13 @@ export default { } this.styleObject.left = left + 'px'; } + + let filterRow = this.$el.parentElement.nextElementSibling; + if (filterRow) { + let index = DomHandler.index(this.$el); + filterRow.children[index].style.left = this.styleObject.left; + filterRow.children[index].style.right = this.styleObject.right; + } } }, onHeaderCheckboxChange(event) { diff --git a/src/components/datatable/TableHeader.vue b/src/components/datatable/TableHeader.vue index e3de5f5f0..3bb49a185 100755 --- a/src/components/datatable/TableHeader.vue +++ b/src/components/datatable/TableHeader.vue @@ -120,7 +120,9 @@ export default { return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null; }, getFilterColumnHeaderClass(column) { - return ['p-filter-column', this.columnProp(column, 'filterHeaderClass'), this.columnProp(column, 'class')]; + return ['p-filter-column', this.columnProp(column, 'filterHeaderClass'), this.columnProp(column, 'class'), { + 'p-frozen-column': this.columnProp(column, 'frozen') + }]; }, getFilterColumnHeaderStyle(column) { return [this.columnProp(column, 'filterHeaderStyle'), this.columnProp(column, 'style')]; diff --git a/src/components/treetable/HeaderCell.vue b/src/components/treetable/HeaderCell.vue index b2a850f8a..4a7cc1a45 100644 --- a/src/components/treetable/HeaderCell.vue +++ b/src/components/treetable/HeaderCell.vue @@ -79,6 +79,13 @@ export default { } this.styleObject.left = left + 'px'; } + + let filterRow = this.$el.parentElement.nextElementSibling; + if (filterRow) { + let index = DomHandler.index(this.$el); + filterRow.children[index].style.left = this.styleObject.left; + filterRow.children[index].style.right = this.styleObject.right; + } } }, onClick(event) { From 729133f428e74824419912bfcd09ea6fd11b238f Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sat, 15 May 2021 13:06:54 +0300 Subject: [PATCH 2/3] Fixed #1260 - TreeTable does not add column and style props --- src/components/treetable/BodyCell.vue | 2 +- src/components/treetable/FooterCell.vue | 2 +- src/components/treetable/HeaderCell.vue | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/treetable/BodyCell.vue b/src/components/treetable/BodyCell.vue index ad276c6e0..2993a8553 100644 --- a/src/components/treetable/BodyCell.vue +++ b/src/components/treetable/BodyCell.vue @@ -121,7 +121,7 @@ export default { }, computed: { containerClass() { - return [this.columnProp('bodyClass'), { + return [this.columnProp('bodyClass'), this.columnProp('class'), { 'p-frozen-column': this.columnProp('frozen') }]; }, diff --git a/src/components/treetable/FooterCell.vue b/src/components/treetable/FooterCell.vue index e9477aa6e..84b31c01e 100644 --- a/src/components/treetable/FooterCell.vue +++ b/src/components/treetable/FooterCell.vue @@ -59,7 +59,7 @@ export default { }, computed: { containerClass() { - return [this.columnProp('footerClass'), { + return [this.columnProp('footerClass'), this.columnProp('class'), { 'p-frozen-column': this.columnProp('frozen') }]; }, diff --git a/src/components/treetable/HeaderCell.vue b/src/components/treetable/HeaderCell.vue index 4a7cc1a45..e8e78d30d 100644 --- a/src/components/treetable/HeaderCell.vue +++ b/src/components/treetable/HeaderCell.vue @@ -121,7 +121,7 @@ export default { }, computed: { containerClass() { - return [this.columnProp('headerClass'), { + return [this.columnProp('headerClass'), this.columnProp('class'), { 'p-sortable-column': this.columnProp('sortable'), 'p-resizable-column': this.resizableColumns, 'p-highlight': this.isColumnSorted(), From d8fac497c7ef4602d14bc924d907d89477c6680a Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sat, 15 May 2021 13:12:56 +0300 Subject: [PATCH 3/3] Fixed horizontal only scroll --- src/components/treetable/TreeTable.vue | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue index 80be66ee4..ed981a996 100755 --- a/src/components/treetable/TreeTable.vue +++ b/src/components/treetable/TreeTable.vue @@ -264,6 +264,16 @@ export default { this.d_multiSortMeta = newValue; } }, + mounted() { + if (this.scrollable && this.scrollDirection !== 'vertical') { + this.updateScrollWidth(); + } + }, + updated() { + if (this.scrollable && this.scrollDirection !== 'vertical') { + this.updateScrollWidth(); + } + }, methods: { columnProp(col, prop) { return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null; @@ -739,6 +749,9 @@ export default { }, hasGlobalFilter() { return this.filters && Object.prototype.hasOwnProperty.call(this.filters, 'global'); + }, + updateScrollWidth() { + this.$refs.table.style.width = this.$refs.table.scrollWidth + 'px'; } }, computed: {