primeng p-datatable save filter header value

Question

I'm using PrimeNg DataTable on an Angular app.

I want to save filters and when returned to the component, restore filters and display filters value on the col headers.

Actually I'm trying this, but it doesn't work:

@ViewChild(DataTable) candTable: DataTable;
storeFilters(event: any) {
  this._candidatureService.storeFilters(event.filters);
}

restoreFilters(){
  let filtersStored = this._candidatureService.restoreFilters();
  if(filtersStored){
    this.candTable.filters = filtersStored;
  }
}

I'm using primeng@4.2.2, and angular@4.3.3.

Answer 1

The logic here is you have to save your filter in sessionStorage or you can also save it in localStorage. It is depends on your requirement.

1. When you will load the component we will check if there are any table event object saved in session or not see ngOnInit().

2. If it is there see the logic in loadDataLazily() method.

Whenever you make any changes in filters Primeng table triggers a table event Object. In which you can find all the detail of Filter row sort order etc.

I have taken two things here one text box and another one is dropdown for the filter. The only thing we have to do extra for showing the filters in text box and selct box is, we have to take two variables. Which we will bind with ngModel. If you have 10 columns all having filter then you will have to take 10 variables or may be you can crate an Object.

<p-table #dt [columns]="selectedColumns" 
    [value]="data"
    [lazy]="true"
    (onLazyLoad)="loadDataLazily($event)"
    [paginator]="true"
    [rows]="10"
    [totalRecords]="totalRecords"
    [filterDelay]="500">
    <ng-template pTemplate="header">
        <tr>
            <th *ngFor="let col of selectedColumns" [ngSwitch]="col.field">
               {{col.header}}
            </th>
        </tr>
        <tr>
            <th *ngFor="let col of selectedColumns" [ngSwitch]="col.field">
                <input *ngSwitchCase="'NAME'" 
                type="text"
                [(ngModel)]="name" 
                (input)="dt.filter($event.target.value, 'NAME')" 
                [value]="dt.filters['NAME']?.value">

                <p-dropdown *ngSwitchCase="'USER'"
                    [options]="users" 
                    [style]="{'width':'100%'}"
                    [(ngModel)]="user"
                    (onChange)="dt.filter($event.value, 'USER', 'equals')">
                </p-dropdown>
            </th>                    
        </tr>
     </ng-template>
    <ng-template pTemplate="body" let-i="rowIndex" let-suite>
     ....                            
    </ng-template>
</p-table>
// This is how you can reset filter.
<button class="btn btn-default btn-sm" (click)="resetTable(dt)">
 <i class="fa fa-undo"></i>&nbsp;Reset Filter</button>

public user;
public name
public cachedTableEvent:any;
ngOnInit() {
    this.cachedTableEvent = JSON.parse(sessionStorage.getItem("filter"));
}
loadDataLazily(e: any) {
    sessionStorage.setItem("filter",JSON.stringify(e));
    if(this.cachedTableEvent){
        e = this.cachedTableEvent;
        for (var key in this.cachedTableEvent['filters']) {
          if (this.cachedTableEvent['filters'].hasOwnProperty(key)) {
             switch(key){
                  case "USER":
                        this.user = this.cachedTableEvent['filters'][key].value;
                  case "NAME":
                        this.name = this.cachedTableEvent['filters'][key].value;
             }
          }
       }
      this.cachedTableEvent = null;
    }
    fetchRecordFromBackend(e);
  }
resetTable(e: any) {
    this.name = null;
    this.user = null;
    e.reset();
  }

This code is perfectly working for me. Might it help you.