PrimeNG DataTable multiselect filter with dynamic values

Question

I am using PrimeNG 4.x.x supporting Angular 4. I want to provide values dynamically to multiselect filter in DataTable column.

As shown below I am creating table columns dynamically from 'clientcolumnDefs' and now I want to provide values dynamically to multiselect filter Option .

<p-dataTable #clientTable [value]="clientrowData" selectionMode="single" [(selection)]="selectedClient" dataKey="id" [contextMenu]="cm">
			<p-column *ngFor="let col of clientcolumnDefs" [field]="col.field" [header]="col.header" sortable="true" [filter]="true" filterMatchMode="in" [style]="{'overflow':'visible'}">
				<ng-template pTemplate="filter" let-col>
					<p-multiSelect  [options]="dynamicaFilters" defaultLabel="All" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-multiSelect>
				</ng-template>
			</p-column>
</p-dataTable>

How do i populate my dynamicFilters in typescript , so that it works for all the columns.

The filters should be of this type but the values will be dynamic for each column.

filter image

karthiks3000 karthiks3000 · Accepted Answer · 2017-07-06T21:38:21

dynamicaFilters should be a multi dimensional array. In your ts file you need to fetch the distinct values per column and insert them into a temp array and then insert that temp array into dynamicaFilters.

Your html code will also change to be -

<p-column *ngFor="let col of clientcolumnDefs; let i= index" [field]="col.field" [header]="col.header" sortable="true" [filter]="true" filterMatchMode="in" [style]="{'overflow':'visible'}">
            <ng-template pTemplate="filter" let-col>
                <p-multiSelect  [options]="dynamicaFilters[i]" defaultLabel="All" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-multiSelect>
            </ng-template>
        </p-column>

I did not get a chance to try this myself, let me know if you have any questions.

PrimeNG DataTable multiselect filter with dynamic values

1 Answers