I want to implement data filtering in a PrimeNG
table, according to an indexed element of a property of my model.
Model example in JSON format below:
{
"customObj":{
"id":1,
"name":"my name",
"labels":[
{
"id":1,
"labelValue":"A random label"
},
{
"id":2,
"labelValue":"A random label 2"
}
]
}
}
Considering the model above, I would like to filter the table by customObj.labels[0].labelValue
property.
Which is the most out of the box way to achieve this in a PrimeNG table?
Until now I used for single object properties filtering the columnFilter
component as shown below
<!-- example of filtering for the name property -->
<th>
<p-columnFilter type="text" field="name"></p-columnFilter>
</th>
can I use something similar to this? I have read the PrimeNG
documentation but did not find any example on this. Thanks in advance
Angular version: 12.2.3
PrimeNG version: 12.1
The simplest solution I finally found to filter the table by indexed element of array property is using the <p-columnFilter
as shown below:
<!-- Filter customObj by 'labels[0].labelValue-->
<th>
<p-columnFilter type="text" field="labels.0.labelValue"></p-columnFilter>
</th>
If the index is in variable form and we do not know it beforehand you can also use variable as shown below:
<!-- Filter customObj by 'labels[index].labelValue-->
<th>
<p-columnFilter type="text" field="labels.{{index}}.labelValue"></p-columnFilter>
</th>