PrimeNG table is not resetting

Question

Applying reset method on PrimeNG table resets the icon, but it does not reset data.

HTML

<button (click)="onReset(dt)">Reset Table</button>

TS

onReset = (table) => {
    table.reset();
}

This does no work for me. I am using p-table. I tried to @ViewChild(Table) table: Table; and then this.table.reset(); — Md Rahaman
Try changing onReset func, remove arrow operator as onReset(table){} — User3250
Not successfull. The referece on my table in #dt , Component file @ViewChild('dt') dt: Table; My reset function onResetDataTable () { this.dt.reset() }. Still my table data in not change back to it's original state. — Md Rahaman

ohdev ohdev · Accepted Answer · 2019-05-17T15:12:55

This is my template code and it's working like a charm:

<p-table #tt [columns]="cols" [value]="rowData" sortField="Id" [paginator]="true" [rows]="10" [lazy]="true"
(onLazyLoad)="loadListLazy($event)" [totalRecords]="totalRecords" [responsive]="true">
<ng-template pTemplate="header" let-columns>
    <tr>
        <th *ngFor="let col of columns" class="ui-table-thead-filter" [ngSwitch]="col.field">
            <input *ngSwitchCase="'Id'" class="form-control" pInputText type="text" style="width: 100%" (input)="tt.filter($event.target.value, col.field, col.filterMatchMode)">
            <input *ngSwitchCase="'Name'" class="form-control" pInputText type="text" style="width: 100%" (input)="tt.filter($event.target.value, col.field, col.filterMatchMode)">
            <p-button class="btn btn-cancel" *ngSwitchCase="'Actions'" label="Clear filters" (click)="tt.reset()"></p-button>
        </th>
    </tr>
    <tr>
        <th *ngFor="let col of columns" [pSortableColumn]="col.field"
            [pSortableColumnDisabled]="col.field === 'Actions'">
            {{col.header}}
            <p-sortIcon *ngIf="col.field !== 'Actions'" [field]="col.field"></p-sortIcon>
        </th>
    </tr>

</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
        <td>{{rowData["Id"]}}</td>
        <td>{{rowData["Name"]}}</td>
        <td class="text-center">
            <input pButton (click)="onEdit(rowData['Id'])" value="Edit" class="btn btn-sm btn-edit" />
        </td>
    </tr>
</ng-template>

You don't need do anything in typescript. Only tt.reset()

But I have another question to everyone. tt.reset() function is not clearing filters inputs. Is there any simple way or I need to create function like: clearAllFilters() {} and clear by hand every input from search bar?

PrimeNG table is not resetting

1 Answers