如何使PrimeNG p-table列调整大小功能适用于移动设备和平板电脑设备?

时间:2019-06-21 17:14:00

标签: angular primeng

我正在使用PrimeNG p表在Angular 6项目中显示数据表。在桌面版本中,表的列大小调整非常适合。但是在“移动和平板电脑”视图中,它没有提供调整大小的选项。下面是我的代码:

<p-table #dtData [columns]="selectedColumns" resizableColumns="true" (sortFunction)="customSort($event)" [customSort]="true" [style]="{width:'100%'}" [(selection)]="selectedItem" [rowHover]="true" [dataKey]="tableKey" [value]="tableData" [scrollable]="true" [ngClass]="!headerExpandFlag?'ptable-main-expand-cls':'ptable-main-cls'" scrollHeight="250px" >
      <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
          <col *ngFor="let col of columns" >
        </colgroup>
      </ng-template>

      <ng-template pTemplate="header" let-columns>
        <tr>
          <th>
            <p-tableHeaderCheckbox (click)="toggleSelect(rowData,$event)"></p-tableHeaderCheckbox>
          </th>
          <th *ngFor="let col of columns" pResizableColumn pReorderableColumn  [pSortableColumn]="col.field" >
            {{col.header}}
            <p-sortIcon [field]="col.field" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
          </th>

        </tr>
      </ng-template>

      <ng-template pTemplate="emptymessage">
        <div class="empty-message-week" >
          <span class="empty-txt"> No Record Found </span>
        </div>
      </ng-template>

      <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex" let-columns="columns" class="ui-resizable-column">
        <tr [pSelectableRow]="rowData" (click)="onRowClick($event,rowData)">
          <td>
            <p-tableCheckbox (click)="toggleSelect(rowData,$event)" [value]="rowData"></p-tableCheckbox>
          </td>

          <td *ngFor="let col of columns" [ngClass] = "displayColor(col.field, rowData)"  (click)="openLink(rowData,col.field,$event)">
            <span  pTextEllipsis matTooltipClass="tool-tip" [matTooltip]="rowData[col.field]" [matTooltipPosition]="'above'" >
              {{rowData[col.field]}}
            </span>
          </td>
        </tr>
      </ng-template>
      <ng-template pTemplate="footer" >
        <div fxLayout="row" class="caption-style"></div>
      </ng-template>

    </p-table>

PrimeNG表格列的大小可以在手机或平板电脑视图中工作吗?

预先感谢!

0 个答案:

没有答案