我对数据表的列重新排序和列大小调整不起作用有问题。我也尝试启用和禁用其中之一。重现问题的项目
https://stackblitz.com/edit/angular-ptable?file=src%2Fapp%2Fapp.component.html
https://stackblitz.com/edit/angular-ptable-3ft2xt
<tr>
<th *ngFor="let col of columns" **pReorderableColumn pResizableColumn** >
{{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>
angular 13
和 primeng 13:
Primeng表(P表(水平和垂直滚动,可调整大小的列,可调整的列,以及过滤的列。 列的初始宽度为 150px。对我来说,一切正常!
这是我如何使用 flex 样式实现这一点的模板:
<p-table #rt styleClass="p-datatable-sm p-datatable-striped p-datatable-gridlines" [columns]="fltResultCols" [value]="fltResultRows" [scrollable]="true" scrollHeight="222px"
[style]="filterTableWidth" dataKey="fid" [resizableColumns]="true" columnResizeMode="fit" [reorderableColumns]="true" selectionMode="multiple"
[(selection)]="fltSelectedRows" (onRowSelect)="onFilteredRowSelect('selected', $event.data)" (onRowUnselect)="onFilteredRowSelect('deselected', $event.data)">
<ng-template pTemplate="header" let-columns>
<tr>
<!--*ngIf="col.field!=='fid'"-->
<th *ngFor="let col of columns" [style]="{'flex':'0 0 150px'}" pReorderableColumn pResizableColumn [pSortableColumn]="col.field">
<div style="display: inline-flex; max-height: 30px; overflow: hidden;" [pTooltip]="col.header" tooltipPosition="top">
<p-sortIcon [field]="col.field"></p-sortIcon>
<span style="width: 50%; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: black;">
{{col.header}}
</span>
<p-columnFilter [type]="col.type" [field]="col.field" display="menu"></p-columnFilter>
</div>
</th>
</tr>
<tr [style]="{'height': '3px','min-height': '3px'}">
<th *ngFor="let col of columns" [style]="{'flex':'0 0 150px', 'background-color':'nawy', 'height':'3px !important', 'padding': '0px !important'}"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-row let-columns="columns" let-rowIndex="rowIndex">
<tr [pSelectableRow]="row" [pSelectableRowIndex]="rowIndex" (contextmenu)="openCmFlt($event, cmFlt, item)">
<!--*ngIf="col.field!=='fid'"-->
<td *ngFor="let col of columns" [style]="{'flex':'0 0 150px'}">
<div style="max-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
{{row[col.field]}}
</div>
</td>
</tr>
</ng-template>
</p-table>