Изменяемый размер столбца группы столбцов (span span и colsapn)

Question

 <p-treeTable [value]="rowsData" [scrollable]="true" responsive = "false" [style]="{width:'100%'}" scrollHeight="200px" [resizableColumns]="true" >
    <ng-template pTemplate="colgroup" >
                <colgroup>
                    <col [style]="{width:'10%'}">
                    <col *ngFor="let col of headerRows[headerRows.length-1].cols"  >
                </colgroup>
    </ng-template>
    <ng-template pTemplate="header">
            <tr *ngFor="let row of headerRows">
                    <th *ngFor="let col of row.cols" [style.width]="col.width" [attr.colspan]="col.colspan" [attr.rowspan]="col.rowspan" style ="text-align:center;" ttResizableColumn><span>{{col.headerName}}</span></th>
            </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
        <tr >
            <td *ngFor="let col of dataCols; let i = index"  [style.width]="col.width">
                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                <span >{{rowData[col.field}}</span>
            </td>
        </tr>
    </ng-template>
</p-treeTable> 

динамическая группа столбцов с простой таблицей дерева, когда я добавляю resizableColumns, которые не работают с группой столбцов