How to hide column in PrimeNG turbo table?

Question

Hi I am trying to convert my PrimeNG data-table to turbo table. Actually I have used [hidden]="!cols.visibility" in PrimeNG my data-table. Now what I should used to achieve the same in turbo table.

Previous datatable Column Code :

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

● Documentation URL: https://www.primefaces.org/primeng/#/datatable

New Turbo table Column Code :

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

● Documentation URL : https://www.primefaces.org/primeng/#/table

What should I use ? I have checked documentation as well but didn't find solution.

Answer 1

We have a similar requirement where we need to hide/show columns dynamically, but also maintain the order of the columns. Here's how we've written the code:

Table definition:

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

Column definition:

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

This will enable you to iterate the array of columns and dynamically change the inline style from 'table-cell' to 'none' and back without changing the original order of the columns.

Answer 2

I used ng-container with *ngIf to hide or show the columns based on a property I set:

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

The same pattern is used on the header.

Answer 3

I'm also using the new TurboTable in one of my projects and in order to show/hide columns i have used the next workaround:

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

Where "ui-table-hide-on-sm" is a CSS class like this:

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

}

Hope this helps you!

Answer 4

This has now been fixed in turbotable, and is the same as the older DataViewModule

hidden="true"

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