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

UI Components for Angular
Post Reply
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">
<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>
<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>
<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>
<ng-template pTemplate="body" let-item>
<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>

Above table is showing like this.

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

Please help me to fix this.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests