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.
columns = [ { field: 'test' header: 'Test Header' display: 'table-cell' }, { field: 'hiddenTest' header: 'Hidden Column' display: 'none' } ];
Bookmark this question. Show activity on this post. cols = [ { field: 'name', header: 'Name', sort: true }, { field: 'age', header: 'Age', sort: true }, { field: 'gender', header: 'Gender', sort: false }, { field: 'status', header: 'Status', sort: false } ];
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With