P-Table with VirtualScroll only header is resizing

[Blackrobot96]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Stackblitz
https://stackblitz.com/edit/primeng-tablecolresize-demo-p886ik?file=src/app/app.component.html

Current behavior
Only the headers of the table are beeing resized, when you add virtualScroll and virtualRowHeight. No errors are thrown.
https://imgur.com/a/GMthfJa

Expected behavior
The header as well as the rest of the rows are resized.

Minimal reproduction of the problem with instructions
I've used the last example of https://www.primefaces.org/primeng/showcase/#/table/colresize 'Scrollable with Variable Width' and added the following properties to the p-table:
[rows]="100" [virtualScroll]="true" [virtualRowHeight]="34"

• Angular version: 11.0.0
• PrimeNG version: 11.0.0-rc.2

[Blackrobot96]

As a simple workaround you can just override the whole onColumnResizeEnd method until it is fixed:

import { Table } from 'primeng/table';
import { DomHandler } from 'primeng/dom';
Table.prototype.onColumnResizeEnd = function (event, column) {
  let delta = this.resizeHelperViewChild.nativeElement.offsetLeft - this.lastResizerHelperX;
  let columnWidth = column.offsetWidth;
  let minWidth = parseInt(column.style.minWidth || 15);

  if (columnWidth + delta < minWidth) {
    delta = minWidth - columnWidth;
  }

  const newColumnWidth = columnWidth + delta;

  if (newColumnWidth >= minWidth) {
    if (this.columnResizeMode === 'fit') {
      let nextColumn = column.nextElementSibling;
      while (!nextColumn.offsetParent) {
        nextColumn = nextColumn.nextElementSibling;
      }

      if (nextColumn) {
        let nextColumnWidth = nextColumn.offsetWidth - delta;
        let nextColumnMinWidth = nextColumn.style.minWidth || 15;

        if (newColumnWidth > 15 && nextColumnWidth > parseInt(nextColumnMinWidth)) {
          if (this.scrollable) {
            let scrollableView = this.findParentScrollableView(column);
            let scrollableBodyTable = DomHandler.findSingle(scrollableView, '.p-datatable-scrollable-body table') || DomHandler.findSingle(scrollableView, 'cdk-virtual-scroll-viewport table');
            let scrollableHeaderTable = DomHandler.findSingle(scrollableView, 'table.p-datatable-scrollable-header-table');
            let scrollableFooterTable = DomHandler.findSingle(scrollableView, 'table.p-datatable-scrollable-footer-table');
            let resizeColumnIndex = DomHandler.index(column);

            this.resizeColGroup(scrollableHeaderTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
            this.resizeColGroup(scrollableBodyTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
            this.resizeColGroup(scrollableFooterTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
          }
          else {
            column.style.width = newColumnWidth + 'px';
            if (nextColumn) {
              nextColumn.style.width = nextColumnWidth + 'px';
            }
          }
        }
      }
    }
    else if (this.columnResizeMode === 'expand') {
      if (newColumnWidth >= minWidth) {
        if (this.scrollable) {
          this.setScrollableItemsWidthOnExpandResize(column, newColumnWidth, delta);
        }
        else {
          this.tableViewChild.nativeElement.style.width = this.tableViewChild.nativeElement.offsetWidth + delta + 'px';
          column.style.width = newColumnWidth + 'px';
          let containerWidth = this.tableViewChild.nativeElement.style.width;
          this.containerViewChild.nativeElement.style.width = containerWidth + 'px';
        }
      }
    }

    this.onColResize.emit({
      element: column,
      delta: delta
    });

    if (this.isStateful()) {
      this.saveState();
    }
  }

  this.resizeHelperViewChild.nativeElement.style.display = 'none';
  DomHandler.removeClass(this.containerViewChild.nativeElement, 'p-unselectable-text');
}

[TKul6]

Thank you @yigitfindikli

[yigitfindikli]

@TKul6 You're welcome :) Always happy to help!