TreeTable - Dynamic Column Group

[painterprimeng]

Please help me to write dynamic Column Group in TreeTable (PrimeNG 6.1 and Angular 5)

Example:
The below static column convert to dynamic column group

Code: Select all

<p-treeTable [value]="sales">
    <ng-template pTemplate="header">
        <tr>
            <th rowspan="3">Brand</th>
            <th colspan="4">Sale Rate</th>
        </tr>
        <tr>
            <th colspan="2">Sales</th>
            <th colspan="2">Profits</th>
        </tr>
        <tr>
            <th>Last Year</th>
            <th>This Year</th>
            <th>Last Year</th>
            <th>This Year</th>
        </tr>
    </ng-template>
</p-treeTable>

Thank you.

[yigitfindikli]

Hi,
I think you can use that;

Code: Select all

headerRows = [
            {
              cols:[
                    {field:'Name',rowspan:'3'},
                    {field:'This Computer',colspan:'2'}  
                ]
            },
            {
                cols:[
                      {field:'Files',colspan:'2'},
                  ]
            },
            {
                cols:[
                      {field:'Size'},
                      {field:'Type'},
                  ]
            }
        ];
        dataCols = [
            { field: 'name'},
            { field: 'size'},
            { field: 'type}'
        ];
        

And html;

Code: Select all

<p-treeTable [value]="files2" [columns]="cols">
        <ng-template pTemplate="header" let-columns>
                <tr *ngFor="let row of headerRows">
                        <th *ngFor="let col of row.cols" [attr.colspan]="col.colspan" [attr.rowspan]="col.rowspan">{{col.field}}</th>
                </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
            <tr>
                <td *ngFor="let col of dataCols; let i = index">
                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>
    </p-treeTable>

and output;

[painterprimeng]

Thank you very much