PrimeNG - Filter table by indexed element of property array - datatable

Question

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

Answer 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>