Search code examples
angularprimengprimeng-datatable

PrimeNG Datatable: Save filters


I am using some of the examples here (https://github.com/primefaces/primeng/issues/304) in order to persist the sort and page in localstorage, so that when a user comes back to the page, their settings are maintained.

I am having trouble with saving the filters however, and can't find any examples.

Template:

<p-dataTable #dt [value]="FilteredIncidentNodes" [rows]="10" [paginator]="true" [pageLinks]="10" [rowsPerPageOptions]="[5,10,20]" [editable]="true"
(onPage)="onPage($event)" (onSort)="onSort($event)" (onFilter)="onFilter($event)">

Code:

onFilter(e) {
    localStorage.setItem("filters", JSON.stringify(e));
  }

ngOnInit() {
    const opt = localStorage.getItem(this.optionsKey);
    const filters = localStorage.getItem("filters");
    if (opt) {
        let go = JSON.parse(opt);
        setTimeout(() => {
            this.gridOptions = go;
            this.dataTable.sortField = this.gridOptions.sortField;
            this.dataTable.sortOrder = this.gridOptions.sortOrder;
            this.dataTable.sortSingle();
            this.dataTable.paginate(this.gridOptions);

            if (filters) {
                console.log(JSON.parse(filters));
                this.dataTable.filters = JSON.parse(filters);
            }
        //this.blocked = false;
      }, 0);

      return;
    }
  }

Solution

  • I was able to just save the filters from the table into local storage:

    onFilter(e) {
        localStorage.setItem("filters", JSON.stringify(this.dataTable.filters));
      }