p-table 列重新排序和列调整大小不起作用

Question

我遇到数据 table 的问题，列重新排序和列调整大小不起作用。我也试过启用和禁用其中之一.. 重现问题的项目

https://stackblitz.com/edit/angular-ptable?file=src%2Fapp%2Fapp.component.html

Answer 1

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>

Answer 2

angular 13 和 primeng 13:

primeng table (p-table) 可水平和垂直滚动、可调整大小的列、可重新记录的列以及已过滤的列。列的初始宽度为 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;">
                                &nbsp; {{col.header}} &nbsp;
                            </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>

p-table 列重新排序和列调整大小不起作用

p-table Column Reorder and Column Resize doesn't work

primeng

angular