p-table Column Reorder 和 Column Resize 不起作用

Question

我的數據表有問題，列重新排序和列調整大小不起作用。 我還嘗試啟用和禁用其中之一.. 重現問題的項目

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>