From 8a42e6710fa708bf2bdeb7d944382c238adb9c08 Mon Sep 17 00:00:00 2001 From: Assassinationrogue Date: Tue, 2 May 2023 23:08:18 +0530 Subject: [PATCH 1/3] P-Table - Column resize not working as expected --- src/app/components/table/table.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index e8b132dd1e9..a348e4e1d5a 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -2092,6 +2092,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable } onColumnResizeEnd() { + let numberOfColumn = this.tableViewChild.nativeElement.rows[0].cells.length; let delta = this.resizeHelperViewChild.nativeElement.offsetLeft - this.lastResizerHelperX; let columnWidth = this.resizeColumnElement.offsetWidth; let newColumnWidth = columnWidth + delta; @@ -2106,7 +2107,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable this.resizeTableCells(newColumnWidth, nextColumnWidth); } } else if (this.columnResizeMode === 'expand') { - let tableWidth = this.tableViewChild.nativeElement.offsetWidth + delta; + let tableWidth = this.tableViewChild.nativeElement.offsetWidth + (delta * numberOfColumn); this.setResizeTableWidth(tableWidth + 'px'); this.resizeTableCells(newColumnWidth, null); } From fdc9de4574e2dda358a8ea95374bfb81be96d8cc Mon Sep 17 00:00:00 2001 From: Assassinationrogue Date: Wed, 3 May 2023 00:55:26 +0530 Subject: [PATCH 2/3] P-Table - Column resize not working as expected --- src/app/components/table/table.ts | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index a348e4e1d5a..f142368f1af 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -1029,6 +1029,8 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable return this.filteredValue || this.value || []; } + private _initialColWidths: number[]; + dataToRender(data) { const _data = data || this.processedData; @@ -2092,7 +2094,6 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable } onColumnResizeEnd() { - let numberOfColumn = this.tableViewChild.nativeElement.rows[0].cells.length; let delta = this.resizeHelperViewChild.nativeElement.offsetLeft - this.lastResizerHelperX; let columnWidth = this.resizeColumnElement.offsetWidth; let newColumnWidth = columnWidth + delta; @@ -2107,7 +2108,8 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable this.resizeTableCells(newColumnWidth, nextColumnWidth); } } else if (this.columnResizeMode === 'expand') { - let tableWidth = this.tableViewChild.nativeElement.offsetWidth + (delta * numberOfColumn); + this._initialColWidths = this._totalTableWidth(); + let tableWidth = this.tableViewChild.nativeElement.offsetWidth + delta; this.setResizeTableWidth(tableWidth + 'px'); this.resizeTableCells(newColumnWidth, null); } @@ -2126,18 +2128,23 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable DomHandler.removeClass(this.containerViewChild.nativeElement, 'p-unselectable-text'); } - resizeTableCells(newColumnWidth, nextColumnWidth) { - let colIndex = DomHandler.index(this.resizeColumnElement); + private _totalTableWidth(): number[] { let widths = []; const tableHead = DomHandler.findSingle(this.containerViewChild.nativeElement, '.p-datatable-thead'); let headers = DomHandler.find(tableHead, 'tr > th'); headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header))); + return widths; + } + + resizeTableCells(newColumnWidth, nextColumnWidth) { + let colIndex = DomHandler.index(this.resizeColumnElement); + this.destroyStyleElement(); this.createStyleElement(); let innerHTML = ''; - widths.forEach((width, index) => { + this._initialColWidths.forEach((width, index) => { let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width; let style = `width: ${colWidth}px !important; max-width: ${colWidth}px !important;`; innerHTML += ` @@ -2148,7 +2155,6 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable } `; }); - this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML); } From 03d2292d31757ede27bf7631db612735616d3e67 Mon Sep 17 00:00:00 2001 From: Assassinationrogue Date: Wed, 3 May 2023 01:02:39 +0530 Subject: [PATCH 3/3] P-Table - Column resize not working as expected --- src/app/components/table/table.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index f142368f1af..af92d1cbe19 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -2139,12 +2139,14 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable resizeTableCells(newColumnWidth, nextColumnWidth) { let colIndex = DomHandler.index(this.resizeColumnElement); + let width = this.columnResizeMode === 'expand' ? this._initialColWidths : this._totalTableWidth(); this.destroyStyleElement(); this.createStyleElement(); + let innerHTML = ''; - this._initialColWidths.forEach((width, index) => { + width.forEach((width, index) => { let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width; let style = `width: ${colWidth}px !important; max-width: ${colWidth}px !important;`; innerHTML += `