PrimeNG Load DataTable after Filter is applied

Question

I'm getting the data from the API, and rendering it in p-table

Right after that I'm triggering the table filtering programmatically (default filter).

The problem I'm facing is that the Table is loaded and rendered without filter, and in few ms later filter is applied, and table re-rendered.

Is there a way to get the event which triggers the loading of Prime Table? Or delay it somehow.

Template:

<p-table #tt class="table"[value]="myList">
     ....
     <tr>
       <th>
        <p-dropdown appendTo="body" *ngSwitchCase="'state'" [options]="states"
        (onChange)="tt.filter($event.value, 'state', 'equals')"></p-dropdown>
       </th>
     </tr>
     ....
</p-table>

Class:

export class Component implements {
    @ViewChild('tt') tt: DataTable;
    myList: any;

    getList(){
    Promise.resolve(...)
        .then(res => {
                this.myList = res;
                this.tt.filter('created', 'state', 'equals');
              });
            }
     }

Kraken Kraken · Accepted Answer · 2018-02-20T19:48:35

This filtering is like dependant on your markup, and markup will only appears only when you will get data from api call.

So best decision and the right way to perform this will be to sort your array inside of then callback programaticly like

this.myList = res.sort(yourCustomSortFunction);

As i understood you need to render this immediatly, so why not to sort it in advance before template rendering at all.

PrimeNG Load DataTable after Filter is applied

1 Answers