primeNG filter customize

Question

Is it possible to customize DataTable filter in PrimeNG? I have a requirement to filter data from outside of the p-dataTable or from another component - such as a left rail that will filter datatable on the right side of left rail (see attached image).

Answer 1

You can filter data manually. Example setup (pseudocode):

parent component (contains filter component and DataTable)

template:

...
<my-filter-component (onFilter)="Filter($event)"></my-filter-component>
...
<p-dataTable [value]="items" ...>
    ...
</p-dataTable>
...

code:

export class MyItemListComponent
{
    private items: MyItemType[];
    ...
    Filter(eventData: MyFilterType){
        ...
        //extract filter values, process if needed(validate, etc.)
        ...
        //now we have all filter data in variable filter
        myItemFilterService.filter(filter).subscribe(data => {
            this.items = data;
        });
    }
}

filter component

template

...
//your fields here bound to myFilter via NgModel

<input type="text" ... [(ngModel)] = "myFilter.Name" (keyup)="onSubmitFilter($event)">
...

code:

export class MyFilterComponent {
    ...
    private myFilter: MyFilterType;
    ...
    @Output()
    public onFilter: EventEmitter<MyFilterType> = new EventEmitter<MyFilterType>();
    ...
    onSubmitFilter(){
        this.onFilter.emit(this.myFilter);
    }
}

Note: It's not a very good idea to call filter on each keystroke, so you probably want to create stream of filter change events and debounce it, but i have omitted this for simplicity. For reference on how to do this you can see official angular example https://angular.io/tutorial/toh-pt6#observables