Home > database >  Primeng dropdown with 2 different options to filter table data
Primeng dropdown with 2 different options to filter table data

Time:09-30

I have the next p-dropdown

<p-dropdown inputId="type1" [options]="type" placeholder="Role"
            #statusDropdown (onChange)="dt.filter(statusDropdown.value, 'role', 'equals')">
            </p-dropdown>

I have a p-table (#dt) where I display 4 diffrent user types named 'role': Applicant, recruiter, evaluator and administrator.

What I need is to filter the users with just 2 options in the dropdown:

  • Applicant: Get just Applicants users
  • Administrative: Get Recruiter, Evaluators and Administrators (in other words get all users except Applicants)

These are my options:

type: string[] = ['Applicant', 'Administrative'];

As you can see I have an onChange event that obviously works when the dropdown Applicant option is selected, but when Administrative is it doesn't because there is no role named 'Administrative'. So I don't know which is the best way to solve this problem. Thanks.

Edit

This are my users:

{
"data": [
    {
        "id": 1,
        "name": "Administrador",
        "username": "Admin",
        "email": "[email protected]",
        "active": true,
        "blocked": false,
        "expirationDate": "2022-04-23T18:25:43.511Z",
        "role": "Administrator"
    },
    {
        "id": 2,
        "name": "Sttefany Klee",
        "username": "sttefany.klee",
        "email": "[email protected]",
        "active": true,
        "blocked": false,
        "expirationDate": "2022-04-23T18:25:43.511Z",
        "role": "Evaluator"
    },
    {
        "id": 3,
        "name": "Mario Olvera",
        "username": "mario.olvera",
        "email": "[email protected]",
        "active": true,
        "blocked": false,
        "expirationDate": "2022-04-23T18:25:43.511Z",
        "role": "Recruiter"
    },
    {
        "id": 4,
        "name": "Ricardo Ruiz",
        "username": "ricardodars",
        "email": "[email protected]",
        "active": true,
        "blocked": false,
        "expirationDate": "2022-04-23T18:25:43.511Z",
        "role": "Applicant"
    },
    {
        "id": 5,
        "name": "Dan Olvera",
        "username": "dantegalante",
        "email": "[email protected]",
        "active": true,
        "blocked": false,
        "expirationDate": "2022-04-23T18:25:43.511Z",
        "role": "Applicant"
    }
]

}

CodePudding user response:

According to the documentation, the filter also has in. I'd try the following:

<p-dropdown inputId="type1" [options]="type" placeholder="Role" #statusDropdown 
  (onChange)="statusDropdown.value === 'Applicant' ? dt.filter(statusDropdown.value, 'role', 'equals') : dt.filter(['Recruiter', 'Evaluators', 'Administrators'], 'role', 'in')"
></p-dropdown>
  • Related