Custom width of Subheader of Table not allow ?

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
Codeplex
Posts: 2
Joined: 20 May 2019, 10:37

22 Jul 2019, 03:46

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

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

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>

Codeplex
Posts: 2
Joined: 20 May 2019, 10:37

22 Jul 2019, 10:26

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>

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

10 Oct 2020, 03:04

Thanks a lot @merve7! Issue is resolved.

Best Regards,

Post Reply

Return to “Barcelona - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests