如何冻结PrimeNg数据表中的列 - Angular 2？

Question

在PrimeNg数据表中，是否可以冻结前几列并且其余部分具有水平scroll-x？ 我想要与此完全相似：

https://datatables.net/extensions/fixedcolumns/examples/initialisation/two_columns.html

Answer 1

<p-dataTable [value]="..yoursource" [frozenWidth]="Set your frozen width in px" [unfrozenWidth]="Set your un frozen width in px">

    -- frozen column
    <p-column [header]="" [frozen]="true">
      <template>                      
      </template>
    </p-column>

   --unfrozen column
    <p-column>
    <p-column>

</p-dataTable>

Answer 2

下面的代码将启用具有水平和垂直滚动的冻结列

在水平滚动中，为列提供固定宽度非常重要。 通常，在自定义可滚动表的列宽时，请使用下面的colgroup以避免错位问题，因为它将同时应用内部不同的单独元素的页眉，正文和页脚部分。

HTML寺庙

<p-table [columns]="scrollableCols" [frozenColumns]="frozenCols" [value]="data" [scrollable]="true" scrollHeight="500px" frozenWidth="250px">
    <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
            <col *ngFor="let col of columns" [style.width.px]="col.width">
        </colgroup>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

TS代码

frozenCols: any[];

scrollableCols: any[];

ngOnInit() {

    this.scrollableCols = [
        { field: 'year', header: 'Year', width: 250 },
        { field: 'brand', header: 'Brand', width: 250 },
        { field: 'color', header: 'Color', width: 250 },
        { field: 'year', header: 'Year', width: 250 },
        { field: 'brand', header: 'Brand', width: 250 },
        { field: 'color', header: 'Color', width: 250 }
    ];

    this.frozenCols = [
        { field: 'vin', header: 'Vin', width: 250 }
    ];

}

点击这里查看更多