PrimeNg TurboTable colgroup dynamic colspan

Question

How can I assign variable to primeng TurboTable ColGroup colspan property.

<ng-template pTemplate="header">
    <tr>
        <th rowspan="3">Brand</th>
        <th colspan="4">Sale Rate</th>
    </tr>
    <tr>
        <th colspan="colSpanCount">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>

In above example, I want to bind colSpanCount variable to colspan attribute of p-table.

score 5 · Answer 1 · answered May 17 '18 at 19:05

I think, I have found an answer myself. We can set [attr.colspan]="colSpanCount" property to set colspan dynamically.

<ng-template pTemplate="header">
    <tr>
        <th rowspan="3">Brand</th>
        <th colspan="4">Sale Rate</th>
    </tr>
    <tr>
        <th [attr.colspan]="colSpanCount">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>

score 0 · Answer 2 · answered May 19 '18 at 13:59

0

As you've discovered, you can change colspan to [attr.colspan].

Another solution is to change colspan to [colSpan].

See this answer for a deeper explanation

answered May 19 '18 at 13:59

Jon

96
6

PrimeNg TurboTable colgroup dynamic colspan

2 Answers2