p-columnFilter with p-multiSelect doesn't work !

UI Components for Angular
Post Reply
Posts: 5
Joined: 11 Apr 2021, 08:56

23 Apr 2021, 15:06

Hi everyone,

I have a data table with different columns, each one having a filter menu that works pretty well.

I mean, the correct rows are displayed depending on the column filter that is applied.

BUT, one kind of filter doesn't work at all.

Here is some code :

Code: Select all

<p-columnFilter *ngIf="col.filterStyle === 'keywords'"

                                <ng-template pTemplate="filter" let-value let-filter="filterCallback">
                                    <p-multiSelect [ngModel]="value" [options]="tableContent" placeholder="Any" (onChange)="filter($event.value)" optionLabel="keywords">
The multiSelect menu displays correctly the different options, that is, the values present in the column whose field is "keywords".
BUT, once I click on any value in the options, the table makes all rows disappear as if the keyword was not present in any row in the column "keywords".

I really don't understand why that is, and how exactly this p-multiSelect works, the documentation being quite poor about it.

I would really appreciate if someone can give me a help understanding what's going on :)

Thank you all !

PS : if you need other portions of code, ask me and I will link them to you too.

Posts: 93
Joined: 19 Sep 2018, 02:52
Location: Ann Arbor, Michigan USA

23 Apr 2021, 18:35

How is the tableContent value declared?

tableContent: SelectItem[];


tableContent: string[];

I was not able to get any further. I played on StackBlitz but did not get anything to work with the multiSelect. If you try the dropdown for status and change it to contains and select 'new' that worked (new, renew).
Last edited by PhilHuhn on 23 Apr 2021, 20:21, edited 1 time in total.

Posts: 5
Joined: 11 Apr 2021, 08:56

23 Apr 2021, 19:07

Code: Select all

<p-table #dt2 [value]="tableContent" [columns]="selectedColumns" [rows]="20" selectionMode="single" [rowsPerPageOptions]="[10,25,50]"
    styleClass="p-datatable-customers" [paginator]="true"
    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [(selection)]="selectedContent">
This is in the p-table parent.

And in the .ts file :

Code: Select all

export class DatatableComponent {
    private _tableContent: any[] = [];
    private _selectedColumns: any[] = [];

    @Input() set tableContent(content: any[]) {
        this._tableContent = content.map(this.dataFormatterFn);
    get tableContent(): any[] {
        return this._tableContent;
It contains Objects representing thesis subjects. And one of tableContent's attribute is "keywords". What is strange, is that in any "simple" filter where I just type the word itself, it works fine.
The correct rows are displayed. For example, if I type in the keyword filter "AI", I will have only rows with AI in the keyword column. But using the multiSelect, it just doesn't work.

Feel free to ask some more question, and thank you for the help !

Posts: 5
Joined: 11 Apr 2021, 08:56

25 Apr 2021, 14:41


Posts: 5
Joined: 11 Apr 2021, 08:56

02 May 2021, 14:03

Still nobody for help?

Posts: 93
Joined: 19 Sep 2018, 02:52
Location: Ann Arbor, Michigan USA

03 May 2021, 17:41

Hey, I basically experienced what you are experiencing. I actually have had my best results in posting on https://stackoverflow.com/. I have posted many things there and gotten results.
Good luck

Posts: 1
Joined: 05 May 2021, 10:20

05 May 2021, 10:21

Hi Everyone! I have been trying to figure this issue out for a while and I'm sure it has something to do with the fact that I am exporting my JSX in a function from a class based component with no render method, although I am not sure how to rectify the issue while maintaining the functionality I'm looking for.

myccpay account

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests