TreeTable - Dynamic Column Group

UI Components for Angular
Post Reply
painterprimeng
Posts: 3
Joined: 12 Sep 2018, 00:03

12 Sep 2018, 00:16

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
Posts: 10
Joined: 08 Aug 2018, 14:09

14 Sep 2018, 09:46

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;
Image

painterprimeng
Posts: 3
Joined: 12 Sep 2018, 00:03

14 Sep 2018, 14:12

Thank you very much

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests