angular - 如何使 PrimeNG p-table 列调整大小功能适用于移动设备和平板设备?
问题描述
我正在使用 PrimeNG p-table 在我的 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 表格列的大小调整是否适用于手机或平板电脑视图?
提前致谢!
解决方案
推荐阅读
- android - 广播接收器未使用警报管理器触发
- python - 使用 Selenium循环浏览网页的标签
- python - NodeJS没有来自python子的输出
- discord - 1.5.x版本如何获取discord服务器中所有用户的列表
- c++ - 为什么将变量调用为 remove() 的参数会出错?
- javascript - 如何在 React js 中使用 axios 将一个或多个文件发送到 API?
- qt - Qt3D 渲染的基本问题
- reactjs - changing the dark mode color in chakra ui
- android - ADB - how to check if file contains a string
- c# - ModelBinding throws error No parameterless constructor defined for this object