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
Custom width of Subheader of Table not allow ?
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
Hi,
Did you try colspan attribute for to set the ratio you want? Like;
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>
It works !
Thank you very much, merve7
Thank you very much, merve7
merve7 wrote: ↑22 Jul 2019, 09:44Hi,
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>
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Thanks a lot @merve7! Issue is resolved.
Best Regards,
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest