Table in a tab control not responsive

Post Reply
kevinyiu
Posts: 1
Joined: 23 Jul 2018, 06:39

03 Dec 2018, 07:38

Hi,
When a Datatable is wrapped inside a fieldset and then inside a tab, it is not responsive in large and medium resolutions.
Can you please advise what needs to be done to fix this issue.

<div class="ui-g-12">
<p-fieldset>

<p-tabView>
<p-tabPanel header="Vehicles" leftIcon="ui-icon-check">
<p-dataTable selectionMode="single" [(selection)]="selectedVehicle" [value]="vehicleList" [lazy]="false" [rows]="10" [paginator]="true" [rowsPerPageOptions]="[10,20,50,100]" sortMode="multiple" reorderableColumns="true" scrollable="true" unfrozenWidth="calc(100%)" scrollWidth="100%" [exportFilename]="filename" [totalRecords]="totalEventRecords" (onRowSelect)=")" dataKey="VIN" [loading]="searching" [responsive]="true" #table>
<p-column *ngFor="let column of vehicleColumns" [field]="column.field" [header]="column.header" [style]="column.style" [sortable]="column.sortable" [sortField]="column.sortField" [frozen]="column.frozen" >
<ng-template let-col let-row="rowData" pTemplate type="body">
<!-- Check if col.field is a date -->
<span *ngIf="isDateField(row[col.field])" [pTooltip]="row[col.field]" tooltipPosition="bottom">{{row[col.field] | date: 'dd/MM/yyyy'}}</span>
<span *ngIf="!isDateField(row[col.field])" [pTooltip]="row[col.field]" tooltipPosition="bottom">{{row[col.field]}}</span>
</ng-template>
</p-column>

</p-dataTable>

</p-tabPanel>
</p-tabView>
</p-fieldset>
</div>

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

17 Dec 2018, 09:00

Datatable component is deprecated. Please use table component (https://www.primefaces.org/primeng/#/table).

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest