PrimeNG: Update Table with Filtered Values

Question

I am trying to filter data that is being stored in a dropdown. The filter box is supposed to outside of the drop down options so I needed to create a custom filtering function. I take the input string (such as "Jan") and try to find the matching numerical value (in this case: "Jan" = 1). Then I look through the data and see if any of the months match that numerical value. When I print out the returned data, it seems I am getting the correct output. However, when I try to update the data that the table uses, it doesn't change.

**HTML:**
<p-table #tt [value]="data" (onFilter)="filter($event)"....>

<input pInputText type="text" class="colmsearch"
placeholder="Search" 
(input)="tt.filter($event.target.value, 'month', 'contains')">

.
.
.
<p-dropdown formControlName="month" class="dropdownInput" *ngSwitchCase="'month'"
[options]="monthLabels"></p-dropdown>

</p-table>

**TS:**
this.data = [
    {id: 03, name: 'First', month: 1},
    {id: 04, name: 'Second', month: 2},
    {id: 05, name: 'Third', month: 1},
    .
    .
    {id: 07, name: 'Fourth', month: 3}

];

this.monthLabels = [
    {label: "Jan", value: 1},
    {label: "Feb", value: 2},
    {label: "Mar", value: 3},
    .
    .
    {label: "Dec", value: 12}
];

newValues: any[];

public filter(event){
        if (event.filters.month) {
            this.newValues = this.filterHelper(event.filters.month.value);
            this.data = this.newValues;
        }
        else {

            this.data = this.origData; //origData: a value that stores the unaltered original data
        }
}

    public filterHelper(filterV) {
        //Step 1: Find the number values that are associated with
        this.newMonths = []

        for (let i = 0; i < 12; i++) {
            if (this.monthLabels[i].label.toLowerCase().includes(filterV)) {
                this.newMonths.push(this.monthLabels[i].value);

            }
        }

        //Step 2: Find the associated data with that value
        this.newData = [];

        for (let i = 0; i < this.data.length; i++) {
            for (let j = 0; j < this.newMonths.length; j++) {
                if (this.data[i].month == this.newMonths[j]) {
                    this.newData.push(this.data[i]);
                }
            }
        }

        return this.newData;
    }

Answer 1

Correct data is not populating because, you are using the same object even after filter, And PrimNg Turbo table use onPush change detection strategy. Try modify below code

 this.data = [...this.newValues]; // in filter method

OR

this.newData.push(Object.assign(this.data[i])); // during filtering

It should work.