<
h1
style
=
"color:green;text-align:center;"
>GeeksforGeeks</
h1
>
<
h3
>Angular PrimeNG Table ColumnFilter Properties</
h3
>
<
p-table
#dt
[value]="tutorials"
dataKey
=
"title"
[rowHover]="true"
[showCurrentPageReport]="true"
[filterDelay]="0"
[globalFilterFields]="['title', 'category', 'rating']"
>
<
ng-template
pTemplate
=
"caption"
>
<
div
class
=
"table-header"
>List of Tutorials</
div
>
</
ng-template
>
<
ng-template
pTemplate
=
"header"
>
<
tr
>
<
th
style
=
"width: 3rem"
>
<
p-tableHeaderCheckbox
></
p-tableHeaderCheckbox
>
</
th
>
<
th
pSortableColumn
=
"title"
>
<
div
class
=
"flex justify-content-between align-items-center"
>
Title
<
p-sortIcon
field
=
"title"
></
p-sortIcon
>
<
p-columnFilter
type
=
"text"
field
=
"title"
display
=
"menu"
class
=
"ml-auto"
[showClearButton]="false"
[showApplyButton]="false">
</
p-columnFilter
>
</
div
>
</
th
>
<
th
pSortableColumn
=
"category"
>
<
div
class
=
"flex justify-content-between align-items-center"
>
Category
<
p-sortIcon
field
=
"category"
></
p-sortIcon
>
<
p-columnFilter
type
=
"text"
field
=
"category"
display
=
"menu"
class
=
"ml-auto"
[showClearButton]="false"
[showApplyButton]="false">
</
p-columnFilter
>
</
div
>
</
th
>
<
th
pSortableColumn
=
"rating"
>
<
div
class
=
"flex justify-content-between align-items-center"
>
Rating
<
p-sortIcon
field
=
"rating"
></
p-sortIcon
>
<
p-columnFilter
type
=
"numeric"
field
=
"rating"
display
=
"menu"
class
=
"ml-auto"
[showClearButton]="false"
[showApplyButton]="false">
</
p-columnFilter
>
</
div
>
</
th
>
</
tr
>
</
ng-template
>
<
ng-template
pTemplate
=
"body"
let-tutorial>
<
tr
class
=
"p-selectable-row"
>
<
td
>
<
p-tableCheckbox
[value]="tutorial"> </
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
>
<
span
class
=
"p-column-title"
> Rating </
span
>
<
span
class
=
"image-text"
>
{{ tutorial.rating }}
</
span
>
</
td
>
</
tr
>
</
ng-template
>
</
p-table
>