Custom Filter Elements for DataTable #196

cagataycivici opened this Issue Apr 12, 2016 · 20 comments


None yet

Add support to place custom content like dropdown, calendar to the filter field of datatable as an alternative to default text-fields.


Will this be added in near future? this is must have feature

fernandocode commented Apr 20, 2016 edited

Much appreciated this feature. +1

I would like to leave some implementation suggestions:

  • Create a template option to filter, similar to what is already there for the columns of the DataTable and allow your events are intercepted and processed by custom listeners, which can be set up any type of filter that may be necessary, in addition to those already mentioned (dropdown, calendar), for example, between (two inputs), bool (checkbox), etc.
  • Allow the object that keeps the DataTable filters can be manipulated by filters outside the DataTable, for example, you have a filter field to a value that is not present in the columns of the DataTable (Example: checkbox active item).
gatapia commented May 13, 2016

If you just want a custom filter (with the standard textbox) a workaround I am using is to set the table to [lazy]="true" you then implement a refresh method yourself, example:

// template

<p-datatable ... [value]="entities" [lazy]="true" [totalRecords]="totrows" (onLazyLoad)="refresh($event, table)"...

// component

public entities: any[];
public totrows: number;
public originals: any[];

loadedFromServer(entities: any[]) {
    this.originals = entities;
    this.entities = entities;

refresh(e: any, table: DataTable) {
    const global = table.globalFilter ? table.globalFilter.value : null;
    this.entities = Sorters.datatableSort(this.originals, e.sortField, e.sortOrder);
    this.entities = !e.filters ? 
        this.entities : 
        SmartFilter.filter(this.entities, e.filters, global);
    this.totrows = this.entities.length;
    if (e.rows) { this.entities = this.entities.slice(e.first, (e.first + e.rows)); }
lilling commented May 15, 2016

+1000 very needed


We've done it for PrimeFaces before and will definitely work on it for PrimeNG for beta8.


It's beta8, did you manage to implement it?

caebeman commented Aug 1, 2016

Any updates on the status of this?

Sleeper9 commented Aug 1, 2016

Still nothing in beta11 😞


We're trying to figure out the best way to do this.

ilianiv commented Aug 25, 2016


hoswey commented Sep 5, 2016

it is beta14, we really need this feature..


Is this feature also going to be part of beta 16 next week?

brud commented Nov 25, 2016

Is this possible to set a custom template for filter? It will be more flexible, and allow to add dropdowns, multiselect, and also we can set "clear filter" button for each filter.


Still need this feature.

@cagataycivici cagataycivici added this to the 1.0.2 milestone Nov 30, 2016

We'll work on it for 1.0.2.


screen shot 2016-12-07 at 14 45 29

@cagataycivici cagataycivici added a commit that closed this issue Dec 7, 2016
@cagataycivici cagataycivici Fixed #196 e74807e

@cagataycivici have you all implemented the feature where you can put a calendar in a data table? Still do not see that in the documentation and have tried to look everywhere for this implementation.

MTechDE commented Jan 11, 2017

I want to format a new Date() field. But i also can't set a dynamic template for that.

Biman54 commented Jan 11, 2017

I would like to use the Range slider but the $event.value could not be a list ?

ahelord commented Jan 17, 2017 edited

@mcmack25 @MTechDE @Biman54 this is my solution for filtering with CalendarModule (p-calendar) DataTableModule (p-datatable) or filter format YYYY-MM-DD datatable primeng

  1. import calendar module primeng where use datatable module
  2. declare #dt in template my example datatable name customerPurchaseOrderMembershipInvoices
    <p-dataTable [value]="customerPurchaseOrderMembershipInvoices" sortMode="multiple" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]" [globalFilter]="gb" #dt>
  3. declare style for overflow visible , declare filterMachMode="startsWith" (this is important for functions onSelect and Onblur of Calendar Callbacks) , format dateFormat="yy-mm-dd", Declare calendar events with own functions onBlurCalendarInputPrimeng and onSelectCalendarInputPrimeng there params $event(event handler calendar module),dt (dt references datatable object),col.field (references field of datatable is field="payment_date" ),col.filterMatchMode (references mode of mach mode is startsWith )

<p-column field="payment_date" header="Fecha de pago" [style]="{'width':'180px','overflow':'visible'}" [filter]="true" filterMatchMode="startsWith" [sortable]="true"> <template pTemplate="filter" let-col> <div> <p-calendar [(ngModel)]="dateFilter" [locale]="es" dateFormat="yy-mm-dd" (onBlur)=onBlurCalendarInputPrimeng($event,dt,col.field,col.filterMatchMode) (onSelect)="onSelectCalendarInputPrimeng($event,dt,col.field,col.filterMatchMode)" #calendar></p-calendar> </div> </template> <template let-col let-customerPurchaseOrderMembreship="rowData" pTemplate="body"> <span>{{customerPurchaseOrderMembreship[col.field]}}</span> </template> </p-column>
4. vars declare in component in component init datatable and optional i declere array with spanish lang
dateFilter: Date; ngOnInit(): void { = { firstDayOfWeek: 1, dayNames: ["domingo", "lunes", "martes", "miΓ©rcoles", "jueves", "viernes", "sΓ‘bado"], dayNamesShort: ["dom", "lun", "mar", "miΓ©", "jue", "vie", "sΓ‘b"], dayNamesMin: ["D", "L", "M", "X", "J", "V", "S"], monthNames: ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"], monthNamesShort: ["ene", "feb", "mar", "abr", "may", "jun", "jul", "ago", "sep", "oct", "nov", "dic"] }}

  1. method in component init datatable onSelectCalendarInputPrimeng
    onSelectCalendarInputPrimeng(event: any, dt: any, colField: any, colFilterMatchMode: any) { console.log('entro on select') let stringDateFilter = this.dateFilter.toISOString().slice(0, 10); dt.filter(stringDateFilter, colField, colFilterMatchMode);}

  2. method backend in component init datatable onBlurCalendarInputPrimeng
    onBlurCalendarInputPrimeng(event: any, dt: any, colField: any, colFilterMatchMode: any) { console.log('entro a blur') let beforeDateFilter = this.dateFilter; if (!this.dateFilter || this.dateFilter == null) { console.log('entro a reset') dt.filter('', colField, colFilterMatchMode); } this.dateFilter = beforeDateFilter; }

  3. for test create class customerPurchaseOrderMembershipInvoice with properties payment_date , create array of class customerPurchaseOrderMembershipInvoice name customerPurchaseOrderMembershipInvoices, add object with value of payment_date format YYYY-MM-DD HH24:MM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment