<
div
style
=
"text-align: center"
>
<
h2
style
=
"color: green"
>GeeksforGeeks</
h2
>
<
h4
>Angular PrimeNG Table pFrozenColumn Properties</
h4
>
<
p-toggleButton
class
=
"mr-3"
[(ngModel)]="isNameFreeze"
[onLabel]="'Unfreeze Name'"
offLabel
=
"Freeze Name"
[onIcon]="'pi pi-lock'"
[offIcon]="'pi pi-lock-open'" >
</
p-toggleButton
>
<
p-toggleButton
class
=
"ml-3"
[(ngModel)]="isPriceFreeze"
[onLabel]="'Unfreeze Price'"
offLabel
=
"Freeze Price"
[onIcon]="'pi pi-lock'"
[offIcon]="'pi pi-lock-open'">
</
p-toggleButton
>
<
p-table
[value]="cars"
[scrollable]="true"
scrollDirection
=
"horizontal"
>
<
ng-template
pTemplate
=
"header"
>
<
tr
>
<
th
style
=
"width: 300px"
pFrozenColumn
[frozen]="isNameFreeze"
[ngClass]="{'frozen' : isNameFreeze}">
Car
</
th
>
<
th
style
=
"width: 300px"
>Company</
th
>
<
th
style
=
"width: 300px"
>Vehicle Number</
th
>
<
th
style
=
"width: 300px"
>Manufactured year</
th
>
<
th
style
=
"width: 300px"
>KM Driven</
th
>
<
th
style
=
"width: 300px"
>Rating</
th
>
<
th
style
=
"width: 300px"
pFrozenColumn
[frozen]="isPriceFreeze"
alignFrozen
=
"right"
[ngClass]="{'frozen' : isPriceFreeze}">
Price
</
th
>
</
tr
>
</
ng-template
>
<
ng-template
pTemplate
=
"body"
let-car>
<
tr
>
<
td
style
=
"width: 300px"
pFrozenColumn
[frozen]="isNameFreeze"
[ngClass]="{'frozen' : isNameFreeze}">
{{car.name}}
</
td
>
<
td
style
=
"width: 300px"
>{{car.company}}</
td
>
<
td
style
=
"width: 300px"
>{{car.number}}</
td
>
<
td
style
=
"width: 300px"
>{{car.manufacturedYear}}</
td
>
<
td
style
=
"width: 300px"
>{{car.kmDriven}}</
td
>
<
td
style
=
"width: 300px"
>{{car.rating}}</
td
>
<
td
style
=
"width: 300px"
pFrozenColumn
[frozen]="isPriceFreeze"
alignFrozen
=
"right"
[ngClass]="{'frozen' : isPriceFreeze}">
{{car.price}}
</
td
>
</
tr
>
</
ng-template
>
</
p-table
>
</
div
>