[scrollable]="true" is not supporting rowspan and colspan

UI Components for Angular
Post Reply
mlrao
Posts: 1
Joined: 02 Dec 2021, 12:39

02 Dec 2021, 12:56

Hello Team,

Can you please help me to get support of rowspan and colspan options in the scrollable table header. Whenever I use scrollable = true in primeng it is not working. Please see the below code.


<p-table [value]="items" styleClass="p-datatable-gridlines" [scrollable]="true" responsiveLayout="scroll" scrollHeight="35vh">
<ng-template pTemplate="header">
<tr>
<th class="font-bold" rowspan="3" pFrozenColumn>Product</th>
<th class="font-bold" rowspan="3">Pack</th>
<th class="font-bold" rowspan="3">Batch No.</th>
<th class="font-bold" rowspan="3">Exp. Date</th>
</tr>
<tr>
<th class="font-bold" colspan="2">Ordered</th>
<th class="font-bold" colspan="2">Received</th>
<th class="font-bold" rowspan="3">Rate</th>
<th class="font-bold" rowspan="3">Discount</th>
<th class="font-bold" rowspan="3">Dis. Amt.</th>
<th class="font-bold" rowspan="3">GST%</th>
<th class="font-bold" rowspan="3">Tax Amt.(Rs)</th>
<th class="font-bold" rowspan="3">UPC</th>
<th class="font-bold" rowspan="3">MRP</th>
<th class="font-bold" rowspan="3">Amount</th>
<th class="font-bold" rowspan="3">Option</th>
</tr>
<tr>
<th class="font-bold">Qty. (Partial)</th>
<th class="font-bold">Free (Partial)</th>
<th class="font-bold">Qty.</th>
<th class="font-bold">Free</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-item>
<tr>
<td>{{item.1}}</td>
<td>{{item.2}}</td>
<td>{{item.3}}</td>
<td>{{item.4}}</td>
<td>{{item.5}}</td>
<td>{{item.6}}</td>
<td>{{item.7}}</td>
<td>{{item.8}}</td>
<td>{{item.9}}</td>
<td>{{item.10}}</td>
<td>{{item.11}}</td>
<td>{{item.gst}}</td>
<td>{{item.tax}}</td>
<td>{{item.12}}</td>
<td>{{item.13}}</td>
<td>{{item.amount}}</td>
<td nowrap style="height:23px ;">
<div *ngIf="item.id!=''">
<button pButton pRipple icon="pi pi-pencil" class="p-button-sm p-button-success mr-2"></button>
<button pButton pRipple icon="pi pi-trash" class="p-button-sm p-button-warning"></button>
</div>
</td>
</tr>
</ng-template>
</p-table>

Above table is showing like this.
Image


If I remove [scrollable]="true" from table it's showing correctly like below.
Image


Please help me to fix this.
Image

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 11 guests