web-dev-qa-db-ja.com

PrimeNGターボテーブルの列を非表示にする方法

こんにちは私はPrimeNGデータテーブルをターボテーブルに変換しようとしています。実際、私はPrimeNGのデータテーブルで[hidden]="!cols.visibility"を使用しています。次に、ターボテーブルで同じことを達成するために使用する必要があるものを説明します。

以前のデータテーブルの列コード：

<p-column *ngFor="let col of cols"  [hidden]="!col.visibility" [field]="col.field" [header]="col.header"></p-column>

●ドキュメントのURL： https://www.primefaces.org/primeng/#/datatable

新しいターボテーブルの列コード：

<ng-template pTemplate="header" let-cols>
      <tr>
          <th style="width: 2.25em"></th>
          <th *ngFor="let col of cols">
              {{col.header}}
          </th>
      </tr>
  </ng-template>

●ドキュメントのURL： https://www.primefaces.org/primeng/#/table

何を使うべきですか？ドキュメントも確認しましたが、解決策が見つかりませんでした。

angularprimengprimeng-datatableprimeng-turbotable
5
Vijay Dhanvai

列を動的に非表示/表示するだけでなく、列の順序を維持する必要がある場合にも、同様の要件があります。これが私たちがコードを書いた方法です：

テーブル定義：

<p-table [columns]="columns">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let column of columns" [ngStyle]="{'display': column.display}">
                {{ column.header }}
            </th>
        </tr>
    </ng-template>

    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let column of columns" [ngStyle]="{'display': column.display}">
                {{ rowData[column.field }}
            </td>
        </tr>
    </ng-template>
</p-table>

列の定義：

this.columns = [
    {
        field: 'test'
        header: 'Test Header'
        display: 'table-cell'
    },
    {
        field: 'hiddenTest'
        header: 'Hidden Column'
        display: 'none'
    }
];

これにより、列の配列を反復し、インラインスタイルを「table-cell」から「none」に動的に変更し、列の元の順序を変更せずに戻すことができます。

3
LlamaTamer

* ngIfでng-containerを使用して、設定したプロパティに基づいて列を非表示または表示しました。

<ng-template pTemplate="body" let-rowData let-columns="columns">
  <tr>
    <ng-container *ngFor="let col of columns">
      <td *ngIf="!col.hidden">
        {{rowData[col.field]}}
      </td>
    </ng-container>
  </tr>
</ng-template>

ヘッダーにも同じパターンが使用されます。

1
Sean Hunter

私はプロジェクトの1つで新しいTurboTableも使用しています。列を表示/非表示にするために、次の回避策を使用しました。

<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData">
<td *ngFor="let col of columns" [class]="!col.showOnMobile ? 'ui-table-hide-on-sm' : ''">
<span>{{rowData[col.field]}}</span>
</td>
</tr>
</ng-template>

「ui-table-hide-on-sm」は次のようなCSSクラスです。

@media (max-width: 767px) {
.ui-table-hide-on-sm{
    display: none !important;
}

}

これがお役に立てば幸いです！

0
BBE

これはターボテーブルで修正され、以前のDataViewModuleと同じです。

hidden = "true"

https://github.com/primefaces/primeng/issues/19

0
chris601