Not able to resize columns with primeng-lts

Question

My angular project is using an older version of primeng i.e - 11.4.10. Everything is working fine and I am able to get the table but I am not able to get my columns to resize using the [resizableColumns]="true" property on the html element.

I checked the primeng-lts library itself and it looks like they have this attribute in it. Can someone please guide me here.

component.html

<div class="table-container" style="overflow-x: auto;  overflow-y: hidden;">
    <p-table *ngIf="chart_toggle" [columns]="columns" [value]="tableData" [tableStyle]="{ 'width': '80%', 'min-width': '100rem','font-size': '0.9rem','color': '@foreground'}"
            styleClass="p-datatable-gridlines" [resizableColumns]="true" [scrollable]="true" scrollHeight="550px">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns">
                    {{ col}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-tableData let-columns="columns">
            <tr>
                <td *ngFor="let col of columns"  style="white-space: nowrap;">
                    {{ tableData[col]}}
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

dependencies

"dependencies": {
    "@angular/animations": "~11.2.14",
    "@angular/cdk": "~11.2.13",
    "@angular/common": "~11.2.14",
    "@angular/compiler": "~11.2.14",
    "@angular/core": "~11.2.14",
    "@angular/forms": "~11.2.14",
    "@angular/platform-browser": "~11.2.14",
    "@angular/platform-browser-dynamic": "~11.2.14",
    "@angular/router": "~11.2.14",
    "amazon-cognito-auth-js": "^1.3.3",
    "chart.js": "^2.9.4",
    "moment-timezone": "~0.5.33",
    "primeflex": "^3.2.1",
    "primeicons": "^5.0.0",
    "primeng-lts": "^11.4.10",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.1",
    "zone.js": "~0.11.3"
}

This is an old application and I get a bunch of build error when I try t use the latest version of primeng. So that's not an option for me. Also, as I am able to see the resizableColumns in the source code for this version of primeng-lts, that shouldn't be the problem.

UPDATE

It worked with below changes

<th *ngFor="let col of columns" pResizableColumn>

I was missing - pResizableColumn. Now, if I remove the [scrollable]="true", it all works but with scroll, I get below error.

uncaught Scrollable tables require a colgroup to support resizable columns

Answer 1

Found the solution here: solution

Had to add below section to create colgroups to make the resize work with scroll.

    <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
             <col *ngFor="let col of columns" [style.width]="col.width">
        </colgroup>
    </ng-template>

below is the complete working example

<p-table *ngIf="chart_toggle" [columns]="columns" [value]="tableData" [tableStyle]="{ 'width': '80%', 'min-width': '100rem','font-size': '0.9rem','color': '@foreground'}"
                styleClass="p-datatable-gridlines" [resizableColumns]="true" [scrollable]="true" scrollHeight="550px" [resizableColumns]="true" columnResizeMode="expand">
            <ng-template pTemplate="colgroup" let-columns>
                <colgroup>
                     <col *ngFor="let col of columns" [style.width]="col.width">
                </colgroup>
            </ng-template>
            <ng-template pTemplate="header" let-columns>
                <tr>
                    <th *ngFor="let col of columns" pResizableColumn>
                        {{ col | stringTransform }}
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-tableData let-columns="columns">
                <tr>
                    <td *ngFor="let col of columns" style="white-space: nowrap;" >
                        {{ tableData[col] | dateTransform }}
                    </td>
                </tr>
            </ng-template>
        </p-table>