web-dev-qa-db-fra.com

Comment masquer la colonne dans la table Turbo PrimeNG?

Bonjour, j'essaie de convertir ma table de données PrimeNG en table turbo. En fait, j'ai utilisé [hidden]="!cols.visibility" dans PrimeNG dans ma table de données. Maintenant, ce que je devais utiliser pour atteindre le même en table turbo. 

Code de colonne datatable précédent: 

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

● URL de la documentation: https://www.primefaces.org/primeng/#/datatable

Nouveau code de colonne de la table Turbo: 

<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 de la documentation: https://www.primefaces.org/primeng/#/table

Que devrais-je utiliser? J'ai également vérifié la documentation, mais je n'ai pas trouvé de solution. 

angularprimengprimeng-datatableprimeng-turbotable
3
Vijay Dhanvai

Nous avons une exigence similaire dans laquelle nous devons masquer/afficher les colonnes de manière dynamique, mais également conserver l'ordre des colonnes. Voici comment nous avons écrit le code:

Définition du tableau:

<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>

Définition de la colonne:

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

Cela vous permettra d'itérer le tableau de colonnes et de changer dynamiquement le style en ligne de 'table-cellule' à 'aucun' et inversement sans modifier l'ordre d'origine des colonnes.

3
LlamaTamer

J'ai utilisé ng-container avec * ngIf pour masquer ou afficher les colonnes en fonction d'une propriété que j'ai définie: 

<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>

Le même motif est utilisé sur l'en-tête. 

1
Sean Hunter

J'utilise également la nouvelle TurboTable dans l'un de mes projets et pour afficher/masquer les colonnes, j'ai utilisé la solution suivante: 

<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>

Où "ui-table-hide-on-sm" est une classe CSS comme celle-ci: 

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

}

J'espère que cela vous aide!

0
BBE