datatableprimengprimeng-datatable

PrimeNG - Filter table by indexed element of property array


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


Solution

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