Reset filter value on primeNG table

Question

According to the documentation from https://www.primefaces.org/primeng/#/table the reset method should "Resets sort, filter and paginator state." The problem is that reset table method is not deleting the filters from UI. (although filters field from table.ts is {} after reset)

Please see the this where I reproduced it. The code can be seen here Filter the Summary table (see example) by Failed field (or any other field). Press reset. => The table values will be reset but the filter value will still be visible.

The example is with the basic table but it's also NOT working with dynamic cols.

<ng-template pTemplate="header" let-columns>
<tr>
  <th *ngFor="let col of columns" [pSortableColumn]="col.field">
    {{col.header}}
    <p-sortIcon [field]="col.field"></p-sortIcon>
  </th>
</tr>
<tr>
  <th *ngFor="let col of columns">
    <input pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
  </th>
</tr>

Do you have any ideea on how I can clear the filters from the inputs?

score 11 · Accepted Answer · answered Jul 18 '18 at 13:07

11

Fixed it here

For input fields just add

[value]="dt.filters[<field>] ? dt.filters[<field>].value : ''"

where <field> is the field send in the (input) method.

 (input)="dt.filter($event.target.value,<field>, 'contains')"

For example:

    <th>
      <input pInputText type="text" (input)="dt.filter($event.target.value, 'date', 'contains')"
       [value]="dt.filters['date'] ? dt.filters['date'].value : ''">
    </th>

answered Jul 18 '18 at 13:07

Cosmin Ionascu

7,018
5
25
42

1

This helped me on the inputs. Thanks. How could this be done with p-dropdowns ? – M Akin Dec 04 '19 at 20:21
1

@M Akin, please see my answer for how this can be done for p-dropdown: https://stackoverflow.com/a/61919691/5764320 – Mycah May 20 '20 at 18:01

score 6 · Answer 2 · answered Jul 18 '18 at 07:59

6

What if you just add ngModel to your inputs like:

<input pInputText type="text" [(ngModel)]="dt22" (input)="dt.filter($event.target.value, 'date', 'contains')">

in code you'll define:

  dt22:string = '';

and then onClick will be:

onClick() {
    this.dt22 = '';
    this.table.reset();
  }

I know that this will require additional code, but this will definitely work (a just tried on your stackblitz code)

answered Jul 18 '18 at 07:59

Woworks

1,410
16
21

Hi. I thought about this, but this is a solution for a small table with static columns. If the columns and filters are dynamically generated or if there are 20 columns in the table then there is no way I can bind the input to a variable declared in the `component.ts`. I need a generic solution that can be applied to large tables, some of them with dynamic columns. – Cosmin Ionascu Jul 18 '18 at 09:56
If you need to make it dynamic - just use string[] instead of set of hardcoded variables. – Woworks Jul 18 '18 at 10:32

score 1 · Answer 3 · answered Mar 27 '20 at 18:31

Expanding on your question about the p-multiSelects... you can fix this by binding the ngModel property to checking the value of the data table's filter. You can use this same approach for the input fields as well.

For an input field:

<input pInputText placeholder='Search' 
                  type='text'
                  [ngModel]="dt.filters['foobar']? dt.filters['foobar'].value : ''" 
                  (input)="dt.filter($event.target.value, 'foobar', 'contains')"
>

For a p-multiSelect dropdown:

<p-multiSelect appendTo="body" 
               [options]="[{label: 'Foo', value: 'Foo'}, {label: 'Bar', value: "Bar'}]" 
               [ngModel]="dt.filters['foobar']? dt.filters['foobar'].value: []" 
               (onChange)="dt.filter($event.value, 'foobar', 'in')">
</p-multiSelect>

Finally, calling Table.reset() will completely reset all sorting, filtering and pagination.

score 0 · Answer 4 · edited May 21 '20 at 21:33

0

My solution:

(onChange)="value = $event.value === 'Reset Value' ? '' : 
 $event.value;
datatable.filter(value, column.field, column.filterMatchMode); 
doFilter($event.value)"

Because dt.filter() with empty value will be meaning clear the filter.hope it works...

edited May 21 '20 at 21:33

Jaimil Patel

1,301
6
13

answered May 21 '20 at 12:44

Xuân Thái Bùi

3
1

score 0 · Answer 5 · edited Jan 06 '22 at 23:06

In case you are using p-calendar as a filter input and not using ngmodel :

<p-calendar pInputText #pCalendar1 *ngSwitchCase="'createdDate'"
(onSelect)="dt.filter($event, 'createdDate', 'customDateFilter')" class="p-column-filter form-control pCalendar" [dateFormat]="pCalendarFormat"
    [selectOtherMonths]="true" yearRange="0000:3000" [yearNavigator]="true"
    [monthNavigator]="true" [readonlyInput]="true"
    [value]="dt.filters[col.field] ? datePipe.transform(dt.filters[col.field].value, dateFormat) : ''">
</p-calendar>

@ViewChild('pCalendar1') calendar1: Calendar

clearFilter() {
    this.table.reset();
    if (this.calendar1 && this.calendar1.inputFieldValue) {
      this.calendar1.value = '';
      this.calendar1.inputFieldValue = '';
      this.calendar1.updateInputfield();

    }
}

Reset filter value on primeNG table

5 Answers5

Linked