<
h1
style
=
"color:green;text-align:center;"
>GeeksforGeeks</
h1
>
<
h3
>Angular PrimeNG Table TableHeaderCheckbox Properties</
h3
>
<
h5
>Basic</
h5
>
<
p-table
#dt [value]="tutorials"
dataKey
=
"title"
[rowHover]="true"
[showCurrentPageReport]="true"
[filterDelay]="1000"
[globalFilterFields]="['title', 'category', 'rating']">
<
ng-template
pTemplate
=
"caption"
>
<
div
class
=
"table-header"
>
List of Tutorials
<
span
class
=
"p-input-icon-left"
>
<
i
class
=
"pi pi-search"
></
i
>
<
input
pInputText
type
=
"text"
(input)="dt.filterGlobal($event.target.value, 'contains')"
placeholder
=
"Global Search"
/>
</
span
>
</
div
>
</
ng-template
>
<
ng-template
pTemplate
=
"header"
>
<
tr
>
<
th
style
=
"width: 3rem"
></
th
>
<
th
pSortableColumn
=
"title"
>
Title <
p-sortIcon
field
=
"title"
></
p-sortIcon
>
</
th
>
<
th
pSortableColumn
=
"category"
>
Category <
p-sortIcon
field
=
"category"
></
p-sortIcon
>
</
th
>
<
th
pSortableColumn
=
"rating"
>
Rating <
p-sortIcon
field
=
"rating"
></
p-sortIcon
>
</
th
>
</
tr
>
</
ng-template
>
<
ng-template
pTemplate
=
"body"
let-tutorial
let-rowIndex
=
"rowIndex"
>
<
tr
class
=
"p-selectable-row"
>
<
td
>
<
p-tableCheckbox
[value]="tutorial"
[index]="rowIndex"
[disabled]="tutorial.rating < 5">
</
p-tableCheckbox
>
</
td
>
<
td
>
<
span
class
=
"p-column-title"
> Title </
span
>
{{ tutorial.title }}
</
td
>
<
td
>
<
span
class
=
"p-column-title"
> Category </
span
>
<
span
class
=
"image-text"
>
{{ tutorial.category }}
</
span
>
</
td
>
<
td
pEditableColumn>
<
p-cellEditor
>
<
ng-template
pTemplate
=
"input"
>
<
input
type
=
"text"
[(ngModel)]="tutorial.rating" />
</
ng-template
>
<
ng-template
pTemplate
=
"output"
>
{{ tutorial.rating }}
</
ng-template
>
</
p-cellEditor
>
</
td
>
</
tr
>
</
ng
- template>
</
p
- table>