[New Feature] DataTable clear filters support

[gatapia]

Would be good to be able to clear all filters with a single button click. This includes all column filters and the global filter.

Perhaps a reference to a DOM element would be good just like the global filter, i.e.:

<div class="ui-widget-header ui-helper-clearfix" style="padding:4px 10px;border-bottom: 0 none">
  <i class="fa fa-search" style="float:left;margin:4px 4px 0 0"></i>
  <input #gb type="text" pInputText size="50" style="float:left" 
    placeholder="Filter">
  <button #cf label="Clear Filters"></button>
</div>
<p-dataTable [globalFilter]="gb" [clearFilters]="cf" ...

However, I feel like both global filte and clear filters should be integrated into the table API, like:

<p-dataTable [useGlobalFilter]="true" [useClearFilters]="true"...

This will clean up my templates and let you control styling/theming better.

In the meantime, can you think of a hack to be able to clear all the filters? I mean, I know I could do it with jQuery but that seems too hacky.

[cagataycivici]

There is reset method that does this. See methods section;

http://www.primefaces.org/primeng/#/datatable

Also we can expose filters metadata so that you can clear it yourself from model instead of getting datatable instance.

[gatapia]

reset does not clear the filter input elements (global and columns). It does reset the table tho.

[gatapia]

I am playing around with the reset table exaple you gave above and have the following:

<button (click)="reset(table)" label="Reset"></button>
<p-table #table>

// Component
reset(table: DataTable) {
  table.globalFilter.value = '';
  table.reset();
}

However, the JavaScript API does not appear to expose the column filter input elements. It would be cool to do:

table.columns.forEach(c => { if (c.filterInput) c.filterInput.value = ''; });

Perhaps something to do in conjunction with the custom filter elements issue?

[Coffee-Tea]

reset() does not work correct.

[Krustie101]

The assignment [value]="filters[col.field] ? filters[col.field].value : ''" is missing in the header template for scrollable tables.

[cagataycivici]

As of 2.0.x, reset also clears filters.

public reset() {
        this.sortField = null;
        this.sortOrder = 1;
        
        this.filteredValue = null;
        this.filters = {};

        if(this.paginator) {
            this.paginate({
                first: 0,
                rows: this.rows
            });
        }
        else {
            this.updateDataToRender(this.value);
        }
    }

[sonicwong]

@cagataycivici
I think reset() also roll back rows original ordering is better as ordering indicator being cleared.