CODEWITHSUNDEEP
angulartypescriptprimengprimeng-turbotable
Lukas
Lukas

Reputation: 205

How to filter a PrimeNG table with a nested object?

I want to filter my PrimeNG Table with fields that are not displayed. Here is my Datatable Object:

[
  {
    id: 1,
    actions: [
      'eat',
      'drink',
      'sleep'
    ],
    name: 'test',
    age: 18
  },
  {
    id: 2,
    actions: [
      'eat',
    ],
    name: 'test1',
    age: 22
  },
  {
    id: 3,
    actions: [
      'drink',
      'sleep'
    ],
    name: 'test2',
    age: 19
  }
]

Only this fields are shown in my table: "id, name, age". Now I'm creating my table like this:

<p-table #dt [value]="users" dataKey="id" styleClass="ui-table-users" [rowHover]="true"
         [rows]="50" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10, 25, 50, users.length]"
         [paginator]="true"
         [globalFilterFields]="['id', 'name', 'age']"> <-- HERE I WANT TO ADD THE ACTIONS
  <ng-template pTemplate="caption">
    Users
    <div class="ui-table-globalfilter-container">
      <input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Search..." />
    </div>
  </ng-template>
...

I don't know how to filter in this action array... If I add 'actions' to globalFilterField property, nothing happens. If I filter with "drink", it will display all entries. I tried to add actions.every() to the globalFilterField input properties, but this doesn't work.

Does someone know how to filter a PrimeNG table like this? Do I have to write my own filter?

Upvotes: 2

Views: 3806

Answers (1)

lissettdm
lissettdm

Reputation: 13080

You can create a custom filter using FilterUtils

import { FilterUtils } from "primeng/utils";

//...
  ngOnInit() {
     FilterUtils["includes"] = (value, filter) => value.includes(filter);
    //...
  }

and then you can use it:

dt.filter(value, 'actions', 'includes')

Upvotes: 1

Related Questions