Page 1 of 1

Custom width of Subheader of Table not allow ?

Posted: 22 Jul 2019, 03:46
by Codeplex
Hi,
I bought Barcelona theme and I've been trying to use sub header as sample below :

<p-table [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>
<ng-template pTemplate="body" let-sale>
<tr>
<td>{{sale.brand}}</td>
<td>{{sale.lastYearSale}}</td>
<td>{{sale.thisYearSale}}</td>
<td>{{sale.lastYearProfit}}</td>
<td>{{sale.thisYearProfit}}</td>
</tr>
</ng-template>
</p-table>

For an instance, Under Sales header, i want to set custom width for Last Year to 30%, and This Year to 70%. Assume that This Year columns have longer text.
I've been trying to use style="width: 30% !important;" , [ngStyle]="....", but none is working. Both still have same width. (fyi, this way is works well if it just header / without subheader).
Seems every subheader is set to have same width, but it looks not right.
How to fix this problem ?

Thanks

Re: Custom width of Subheader of Table not allow ?

Posted: 22 Jul 2019, 09:44
by merve7
Hi,
Did you try colspan attribute for to set the ratio you want? Like;

Code: Select all

                <ng-template pTemplate="header">
                    <tr>
                        <th rowspan="6">Brand</th>
                        <th colspan="8">Sale Rate</th>
                    </tr>
                    <tr>
                        <th colspan="4">Sales</th>
                        <th colspan="4">Profits</th>
                    </tr>
                    <tr>
                        <th colspan="1">Last Year</th>
                        <th colspan="3">This Year</th>
                        <th colspan="1">Last Year</th>
                        <th colspan="3">This Year</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-sale>
                    <tr>
                        <td>{{sale. brand}}</td>
                        <td colspan="1">{{sale. lastYearSale}}</td>
                        <td colspan="3">{{sale. thisYearSale}}</td>
                        <td colspan="1">{{sale. lastYearProfit}}</td>
                        <td colspan="3">{{sale. thisYearProfit}}</td>
                    </tr>
                </ng-template>

Re: Custom width of Subheader of Table not allow ?

Posted: 22 Jul 2019, 10:26
by Codeplex
It works !
Thank you very much, merve7 :)

merve7 wrote:
22 Jul 2019, 09:44
Hi,
Did you try colspan attribute for to set the ratio you want? Like;

Code: Select all

                <ng-template pTemplate="header">
                    <tr>
                        <th rowspan="6">Brand</th>
                        <th colspan="8">Sale Rate</th>
                    </tr>
                    <tr>
                        <th colspan="4">Sales</th>
                        <th colspan="4">Profits</th>
                    </tr>
                    <tr>
                        <th colspan="1">Last Year</th>
                        <th colspan="3">This Year</th>
                        <th colspan="1">Last Year</th>
                        <th colspan="3">This Year</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-sale>
                    <tr>
                        <td>{{sale. brand}}</td>
                        <td colspan="1">{{sale. lastYearSale}}</td>
                        <td colspan="3">{{sale. thisYearSale}}</td>
                        <td colspan="1">{{sale. lastYearProfit}}</td>
                        <td colspan="3">{{sale. thisYearProfit}}</td>
                    </tr>
                </ng-template>

Re: Custom width of Subheader of Table not allow ?

Posted: 10 Oct 2020, 03:04
by mert.sincan
Thanks a lot @merve7! Issue is resolved.

Best Regards,