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

Question

在 PrimeNg 数据 table 中，是否可以冻结前几列并为其余列设置水平 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 }
    ];

}

Check here for more

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

How to freeze columns in PrimeNg data table - Angular 2?

datatables

primeng

angular