diff --git a/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.ts b/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.ts
index a9bd6251..84430e65 100644
--- a/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.ts
+++ b/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.ts
@@ -198,13 +198,13 @@ export class DataListGridComponent extends DataSortBase implements OnInit, DoChe
   get _relativeDateListValue(): TemplateRef<any> | undefined {
     return this.relativeDateListValueTemplate || this.relativeDateListValueChildTemplate
   }
-    /**
+  /**
    * @deprecated Will be removed and instead to change the template of a specific column
    * use the new approach instead by following the naming convention column id + IdListValue
    * e.g. for a column with the id 'status' use pTemplate="statusIdListValue"
    */
   @Input() customListValueTemplate: TemplateRef<any> | undefined
-    /**
+  /**
    * @deprecated Will be removed and instead to change the template of a specific column
    * use the new approach instead by following the naming convention column id + IdListValue
    * e.g. for a column with the id 'status' use pTemplate="statusIdListValue"
diff --git a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html
index c20b2399..154de656 100644
--- a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html
+++ b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html
@@ -167,9 +167,14 @@
                   ></div>
                 </ng-template>
                 <ng-template pTemplate="item" let-value>
-                  <ng-container [ngSwitch]="(currentFilterColumn$ | async)?.columnType">
-                    <span *ngSwitchCase="'DATE'">{{ isDate(value.label) ? (value.label | date) : '' }}</span>
-                    <span *ngSwitchDefault> {{ value.label }} </span>
+                  <ng-container
+                    *ngIf="getTemplate(column, TemplateType.FILTERCELL) | async as template"
+                    [ngTemplateOutlet]="template"
+                    [ngTemplateOutletContext]="{
+                    rowObject: getRowObjectFromMultiselectItem(value, column),
+                    column: column
+                }"
+                  >
                   </ng-container>
                 </ng-template>
               </p-multiSelect>
@@ -223,7 +228,7 @@
 
 <ng-template #defaultCell let-rowObject="rowObject" let-column="column">
   <ng-container
-  *ngIf="getTemplate(column) | async as template"
+    *ngIf="getTemplate(column, TemplateType.CELL) | async as template"
     [ngTemplateOutlet]="template"
     [ngTemplateOutletContext]="{
                 rowObject: rowObject,
diff --git a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts
index f846badc..b08aa666 100644
--- a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts
+++ b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts
@@ -27,6 +27,7 @@ import { DataSortDirection } from '../../model/data-sort-direction'
 import { DataTableColumn } from '../../model/data-table-column.model'
 import { ObjectUtils } from '../../utils/objectutils'
 import { DataSortBase } from '../data-sort-base/data-sort-base'
+import { MultiSelectItem } from 'primeng/multiselect'
 
 type Primitive = number | string | boolean | bigint | Date
 export type Row = {
@@ -34,6 +35,17 @@ export type Row = {
   [columnId: string]: unknown
 }
 
+export enum TemplateType {
+  CELL = 'CELL',
+  FILTERCELL = 'FILTERCELL',
+}
+
+interface TemplatesData {
+  templatesObservables: Record<string, Observable<TemplateRef<any> | null>>
+  idSuffix: Array<string>
+  templateNames: Record<ColumnType, Array<string>>
+}
+
 export type Filter = { columnId: string; value: string }
 export type Sort = { sortColumn: string; sortDirection: DataSortDirection }
 
@@ -43,6 +55,8 @@ export type Sort = { sortColumn: string; sortDirection: DataSortDirection }
   styleUrls: ['./data-table.component.scss'],
 })
 export class DataTableComponent extends DataSortBase implements OnInit, AfterContentInit {
+  TemplateType = TemplateType
+
   _rows$ = new BehaviorSubject<Row[]>([])
   @Input()
   get rows(): Row[] {
@@ -191,6 +205,51 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
   get _translationKeyCell(): TemplateRef<any> | undefined {
     return this.translationKeyCellTemplate || this.translationKeyCellChildTemplate
   }
+  @Input() stringFilterCellTemplate: TemplateRef<any> | undefined
+  @ContentChild('stringFilterCell') stringFilterCellChildTemplate: TemplateRef<any> | undefined
+  get _stringFilterCell(): TemplateRef<any> | undefined {
+    return this.stringFilterCellTemplate || this.stringFilterCellChildTemplate
+  }
+  @Input() numberFilterCellTemplate: TemplateRef<any> | undefined
+  @ContentChild('numberFilterCell') numberFilterCellChildTemplate: TemplateRef<any> | undefined
+  get _numberFilterCell(): TemplateRef<any> | undefined {
+    return this.numberFilterCellTemplate || this.numberFilterCellChildTemplate
+  }
+  /**
+   * @deprecated Will be removed and instead to change the template of a specific column filter
+   * use the new approach instead by following the naming convention column id + IdFilterCell
+   * e.g. for a column with the id 'status' use pTemplate="statusIdFilterCell"
+   */
+  @Input() customFilterCellTemplate: TemplateRef<any> | undefined
+  /**
+   * @deprecated Will be removed and instead to change the template of a specific column filter
+   * use the new approach instead by following the naming convention column id + IdFilterCell
+   * e.g. for a column with the id 'status' use pTemplate="statusIdFilterCell"
+   */
+  @ContentChild('customFilterCell') customFilterCellChildTemplate: TemplateRef<any> | undefined
+  get _customFilterCell(): TemplateRef<any> | undefined {
+    return this.customFilterCellTemplate || this.customFilterCellChildTemplate
+  }
+  @Input() dateFilterCellTemplate: TemplateRef<any> | undefined
+  @ContentChild('dateFilterCell') dateFilterCellChildTemplate: TemplateRef<any> | undefined
+  get _dateFilterCell(): TemplateRef<any> | undefined {
+    return this.dateFilterCellTemplate || this.dateFilterCellChildTemplate
+  }
+  @Input() relativeDateFilterCellTemplate: TemplateRef<any> | undefined
+  @ContentChild('relativeDateFilterCell') relativeDateFilterCellChildTemplate: TemplateRef<any> | undefined
+  get _relativeDateFilterCell(): TemplateRef<any> | undefined {
+    return this.relativeDateFilterCellTemplate || this.relativeDateFilterCellChildTemplate
+  }
+  @Input() filterCellTemplate: TemplateRef<any> | undefined
+  @ContentChild('filterCell') filterCellChildTemplate: TemplateRef<any> | undefined
+  get _filterCell(): TemplateRef<any> | undefined {
+    return this.filterCellTemplate || this.filterCellChildTemplate
+  }
+  @Input() translationKeyFilterCellTemplate: TemplateRef<any> | undefined
+  @ContentChild('translationKeyFilterCell') translationKeyFilterCellChildTemplate: TemplateRef<any> | undefined
+  get _translationKeyFilterCell(): TemplateRef<any> | undefined {
+    return this.translationKeyFilterCellTemplate || this.translationKeyFilterCellChildTemplate
+  }
 
   _additionalActions$ = new BehaviorSubject<DataAction[]>([])
   @Input()
@@ -389,6 +448,27 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
         case 'translationKeyCell':
           this.translationKeyCellChildTemplate = item.template
           break
+        case 'stringFilterCell':
+          this.stringFilterCellChildTemplate = item.template
+          break
+        case 'numberFilterCell':
+          this.numberFilterCellChildTemplate = item.template
+          break
+        case 'customFilterCell':
+          this.customFilterCellChildTemplate = item.template
+          break
+        case 'dateFilterCell':
+          this.dateFilterCellChildTemplate = item.template
+          break
+        case 'relativeDateFilterCell':
+          this.relativeDateFilterCellChildTemplate = item.template
+          break
+        case 'filterCellTemplate':
+          this.filterCellChildTemplate = item.template
+          break
+        case 'translationKeyFilterCell':
+          this.translationKeyFilterCellChildTemplate = item.template
+          break
       }
     })
   }
@@ -517,6 +597,41 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
     return isValidDate(d)
   }
 
+  cellTemplatesData: TemplatesData = {
+    templatesObservables: {},
+    idSuffix: ['IdTableCell', 'IdCell'],
+    templateNames: {
+      [ColumnType.DATE]: ['dateCell', 'dateTableCell', 'defaultDateCell'],
+      [ColumnType.NUMBER]: ['numberCell', 'numberTableCell', 'defaultNumberCell'],
+      [ColumnType.RELATIVE_DATE]: ['relativeDateCell', 'relativeDateTableCell', 'defaultRelativeDateCell'],
+      [ColumnType.TRANSLATION_KEY]: ['translationKeyCell', 'translationKeyTableCell', 'defaultTranslationKeyCell'],
+      [ColumnType.CUSTOM]: ['customCell', 'customTableCell', 'defaultCustomCell'],
+      [ColumnType.STRING]: ['stringCell', 'stringTableCell', 'defaultStringCell'],
+    },
+  }
+
+  filterTemplatesData: TemplatesData = {
+    templatesObservables: {},
+    idSuffix: ['IdTableFilterCell', 'IdFilterCell'],
+    templateNames: {
+      [ColumnType.DATE]: ['dateFilterCell', 'dateTableFilterCell', 'defaultDateCell'],
+      [ColumnType.NUMBER]: ['numberFilterCell', 'numberTableFilterCell', 'defaultNumberCell'],
+      [ColumnType.RELATIVE_DATE]: ['relativeDateFilterCell', 'relativeDateTableFilterCell', 'defaultRelativeDateCell'],
+      [ColumnType.TRANSLATION_KEY]: [
+        'translationKeyFilterCell',
+        'translationKeyTableFilterCell',
+        'defaultTranslationKeyCell',
+      ],
+      [ColumnType.CUSTOM]: ['customFilterCell', 'customTableFilterCell', 'defaultCustomCell'],
+      [ColumnType.STRING]: ['stringFilterCell', 'stringTableFilterCell', 'defaultStringCell'],
+    },
+  }
+
+  templatesDataMap: Record<TemplateType, TemplatesData> = {
+    [TemplateType.CELL]: this.cellTemplatesData,
+    [TemplateType.FILTERCELL]: this.filterTemplatesData,
+  }
+
   findTemplate(templates: PrimeTemplate[], names: string[]): PrimeTemplate | undefined {
     for (let index = 0; index < names.length; index++) {
       const name = names[index]
@@ -528,70 +643,94 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
     return undefined
   }
 
-  getTemplate(column: DataTableColumn): Observable<TemplateRef<any> | null> {
-    if (!this.templatesObservables[column.id]) {
-      this.templatesObservables[column.id] = combineLatest([
+  getColumnTypeTemplate(templates: PrimeTemplate[], columnType: ColumnType, templateType: TemplateType) {
+    let template: TemplateRef<any> | undefined
+
+    switch (templateType) {
+      case TemplateType.CELL:
+        switch (columnType) {
+          case ColumnType.DATE:
+            template = this._dateCell
+            break
+          case ColumnType.NUMBER:
+            template = this._numberCell
+            break
+          case ColumnType.RELATIVE_DATE:
+            template = this._relativeDateCell
+            break
+          case ColumnType.TRANSLATION_KEY:
+            template = this._translationKeyCell
+            break
+          case ColumnType.CUSTOM:
+            template = this._customCell
+            break
+          default:
+            template = this._stringCell
+        }
+        break
+      case TemplateType.FILTERCELL:
+        switch (columnType) {
+          case ColumnType.DATE:
+            template = this._dateFilterCell
+            break
+          case ColumnType.NUMBER:
+            template = this._numberFilterCell
+            break
+          case ColumnType.RELATIVE_DATE:
+            template = this._relativeDateFilterCell
+            break
+          case ColumnType.TRANSLATION_KEY:
+            template = this._translationKeyFilterCell
+            break
+          case ColumnType.CUSTOM:
+            template = this._customFilterCell
+            break
+          default:
+            template = this._stringFilterCell
+        }
+        break
+    }
+
+    return (
+      template ??
+      this.findTemplate(templates, this.templatesDataMap[templateType].templateNames[columnType])?.template ??
+      null
+    )
+  }
+
+  getTemplate(column: DataTableColumn, templateType: TemplateType): Observable<TemplateRef<any> | null> {
+    const templatesData = this.templatesDataMap[templateType]
+
+    if (!templatesData.templatesObservables[column.id]) {
+      templatesData.templatesObservables[column.id] = combineLatest([
         this.templates$,
         this.viewTemplates$,
         this.parentTemplates$,
       ]).pipe(
         map(([t, vt, pt]) => {
           const templates = [...(t ?? []), ...(vt ?? []), ...(pt ?? [])]
-          const columnTemplate = this.findTemplate(templates, [
-            column.id + 'IdCell',
-            column.id + 'IdTableCell',
-          ])?.template
+          const columnTemplate = this.findTemplate(
+            templates,
+            templatesData.idSuffix.map((suffix) => column.id + suffix)
+          )?.template
           if (columnTemplate) {
             return columnTemplate
           }
-          switch (column.columnType) {
-            case ColumnType.DATE:
-              return (
-                this._dateCell ??
-                this.findTemplate(templates, ['dateCell', 'dateTableCell', 'defaultDateCell'])?.template ??
-                null
-              )
-            case ColumnType.NUMBER:
-              return (
-                this._numberCell ??
-                this.findTemplate(templates, ['numberCell', 'numberTableCell', 'defaultNumberCell'])?.template ??
-                null
-              )
-            case ColumnType.RELATIVE_DATE:
-              return (
-                this._relativeDateCell ??
-                this.findTemplate(templates, ['relativeDateCell', 'relativeDateTableCell', 'defaultRelativeDateCell'])
-                  ?.template ??
-                null
-              )
-            case ColumnType.TRANSLATION_KEY:
-              return (
-                this._translationKeyCell ??
-                this.findTemplate(templates, ['translationKeyCell', 'translationKeyTableCell', 'defaultTranslationKeyCell'])
-                  ?.template ??
-                null
-              )
-            case ColumnType.CUSTOM:
-              return (
-                this._customCell ??
-                this.findTemplate(templates, ['customCell', 'customTableCell', 'defaultCustomCell'])?.template ??
-                null
-              )
-            default:
-              return (
-                this._stringCell ??
-                this.findTemplate(templates, ['stringCell', 'stringTableCell', 'defaultStringCell'])?.template ??
-                null
-              )
-          }
+          return this.getColumnTypeTemplate(templates, column.columnType, templateType)
         }),
         debounceTime(50)
       )
     }
-    return this.templatesObservables[column.id]
+    return templatesData.templatesObservables[column.id]
   }
 
   resolveFieldData(object: any, key: any) {
     return ObjectUtils.resolveFieldData(object, key)
   }
+
+  getRowObjectFromMultiselectItem(value: MultiSelectItem, column: DataTableColumn) {
+    return {
+      [column.id]: value.label,
+    }
+  }
 }
diff --git a/libs/angular-accelerator/src/lib/components/data-view/data-view.component.html b/libs/angular-accelerator/src/lib/components/data-view/data-view.component.html
index 4db28412..d0a41d9f 100644
--- a/libs/angular-accelerator/src/lib/components/data-view/data-view.component.html
+++ b/libs/angular-accelerator/src/lib/components/data-view/data-view.component.html
@@ -165,6 +165,13 @@
     [relativeDateCellTemplate]="_relativeDateTableCell ? relativeDateCell : undefined"
     [cellTemplate]="_tableCell ? cell : undefined"
     [translationKeyCellTemplate]="_translationKeyTableCell ? translationKeyCell : undefined"
+    [filterCellTemplate]="_tableFilterCell ? filterCell : undefined"
+    [dateFilterCellTemplate]="_dateTableFilterCell ? dateFilterCell : undefined"
+    [customFilterCellTemplate]="_customTableFilterCell ? customFilterCell : undefined"
+    [numberFilterCellTemplate]="_numberTableFilterCell ? numberFilterCell : undefined"
+    [stringFilterCellTemplate]="_stringTableFilterCell ? stringFilterCell : undefined"
+    [relativeDateFilterCellTemplate]="_relativeDateTableFilterCell ? relativeDateFilterCell : undefined"
+    [translationKeyFilterCellTemplate]="_translationKeyTableFilterCell ? translationKeyFilterCell : undefined"
     (sorted)="sorting($event)"
     (filtered)="filtering($event)"
     [totalRecordsOnServer]="totalRecordsOnServer"
@@ -229,4 +236,60 @@
     >
     </ng-container
   ></ng-template>
+  <ng-template #stringFilterCell let-rowObject="rowObject" let-column="column">
+    <ng-container
+      *ngIf="_stringTableFilterCell"
+      [ngTemplateOutlet]="_stringTableFilterCell"
+      [ngTemplateOutletContext]="{rowObject:rowObject, column:column}"
+    >
+    </ng-container
+  ></ng-template>
+  <ng-template #filterCell let-rowObject="rowObject" let-column="column">
+    <ng-container
+      *ngIf="_tableFilterCell"
+      [ngTemplateOutlet]="_tableFilterCell"
+      [ngTemplateOutletContext]="{rowObject:rowObject, column:column}"
+    >
+    </ng-container>
+  </ng-template>
+  <ng-template #dateFilterCell let-rowObject="rowObject" let-column="column">
+    <ng-container
+      *ngIf="_dateTableFilterCell"
+      [ngTemplateOutlet]="_dateTableFilterCell"
+      [ngTemplateOutletContext]="{rowObject:rowObject, column:column}"
+    >
+    </ng-container>
+  </ng-template>
+  <ng-template #customFilterCell let-rowObject="rowObject" let-column="column">
+    <ng-container
+      *ngIf="_customTableFilterCell"
+      [ngTemplateOutlet]="_customTableFilterCell"
+      [ngTemplateOutletContext]="{rowObject:rowObject, column:column}"
+    >
+    </ng-container>
+  </ng-template>
+  <ng-template #numberFilterCell let-rowObject="rowObject" let-column="column">
+    <ng-container
+      *ngIf="_numberTableFilterCell"
+      [ngTemplateOutlet]="_numberTableFilterCell"
+      [ngTemplateOutletContext]="{rowObject:rowObject, column:column}"
+    >
+    </ng-container>
+  </ng-template>
+  <ng-template #relativeDateFilterCell let-rowObject="rowObject" let-column="column">
+    <ng-container
+      *ngIf="_relativeDateTableFilterCell"
+      [ngTemplateOutlet]="_relativeDateTableFilterCell"
+      [ngTemplateOutletContext]="{rowObject:rowObject, column:column}"
+    >
+    </ng-container>
+  </ng-template>
+  <ng-template #translationKeyFilterCell let-rowObject="rowObject" let-column="column">
+    <ng-container
+      *ngIf="_translationKeyTableFilterCell"
+      [ngTemplateOutlet]="_translationKeyTableFilterCell"
+      [ngTemplateOutletContext]="{rowObject:rowObject, column:column}"
+    >
+    </ng-container>
+  </ng-template>
 </div>
diff --git a/libs/angular-accelerator/src/lib/components/data-view/data-view.component.ts b/libs/angular-accelerator/src/lib/components/data-view/data-view.component.ts
index f24f1bf6..065a6380 100644
--- a/libs/angular-accelerator/src/lib/components/data-view/data-view.component.ts
+++ b/libs/angular-accelerator/src/lib/components/data-view/data-view.component.ts
@@ -261,6 +261,53 @@ export class DataViewComponent implements DoCheck, OnInit, AfterContentInit {
   get _dateListValue(): TemplateRef<any> | undefined {
     return this.dateListValueTemplate || this.dateListValueChildTemplate
   }
+  @Input() tableFilterCellTemplate: TemplateRef<any> | undefined
+  @ContentChild('tableFilterCell') tableFilterCellChildTemplate: TemplateRef<any> | undefined
+  get _tableFilterCell(): TemplateRef<any> | undefined {
+    return this.tableFilterCellTemplate || this.tableFilterCellChildTemplate
+  }
+  @Input() dateTableFilterCellTemplate: TemplateRef<any> | undefined
+  @ContentChild('dateFilterCell') dateTableFilterCellChildTemplate: TemplateRef<any> | undefined
+  get _dateTableFilterCell(): TemplateRef<any> | undefined {
+    return this.dateTableFilterCellTemplate || this.dateTableFilterCellChildTemplate
+  }
+  @Input() relativeDateTableFilterCellTemplate: TemplateRef<any> | undefined
+  @ContentChild('relativeDateTableFilterCell') relativeDateTableFilterCellChildTemplate: TemplateRef<any> | undefined
+  get _relativeDateTableFilterCell(): TemplateRef<any> | undefined {
+    return this.relativeDateTableFilterCellTemplate || this.relativeDateTableFilterCellChildTemplate
+  }
+  @Input() translationKeyTableFilterCellTemplate: TemplateRef<any> | undefined
+  @ContentChild('translationKeyTableFilterCell') translationKeyTableFilterCellChildTemplate:
+    | TemplateRef<any>
+    | undefined
+  get _translationKeyTableFilterCell(): TemplateRef<any> | undefined {
+    return this.translationKeyTableFilterCellTemplate || this.translationKeyTableFilterCellChildTemplate
+  }
+  @Input() stringTableFilterCellTemplate: TemplateRef<any> | undefined
+  @ContentChild('stringTableFilterCell') stringTableFilterCellChildTemplate: TemplateRef<any> | undefined
+  get _stringTableFilterCell(): TemplateRef<any> | undefined {
+    return this.stringTableFilterCellTemplate || this.stringTableFilterCellChildTemplate
+  }
+  @Input() numberTableFilterCellTemplate: TemplateRef<any> | undefined
+  @ContentChild('numberTableFilterCell') numberTableFilterCellChildTemplate: TemplateRef<any> | undefined
+  get _numberTableFilterCell(): TemplateRef<any> | undefined {
+    return this.numberTableFilterCellTemplate || this.numberTableFilterCellChildTemplate
+  }
+  /**
+   * @deprecated Will be removed and instead to change the template of a specific column filter
+   * use the new approach instead by following the naming convention column id + IdTableFilterCell
+   * e.g. for a column with the id 'status' in DataTable use pTemplate="statusIdTableFilterCell"
+   */
+  @Input() customTableFilterCellTemplate: TemplateRef<any> | undefined
+  /**
+   * @deprecated Will be removed and instead to change the template of a specific column filter
+   * use the new approach instead by following the naming convention column id + IdTableFilterCell
+   * e.g. for a column with the id 'status' in DataTable use pTemplate="statusIdTableFilterCell"
+   */
+  @ContentChild('customTableFilterCell') customTableFilterCellChildTemplate: TemplateRef<any> | undefined
+  get _customTableFilterCell(): TemplateRef<any> | undefined {
+    return this.customTableFilterCellTemplate || this.customTableFilterCellChildTemplate
+  }
 
   @Input() additionalActions: DataAction[] = []
 
@@ -391,6 +438,27 @@ export class DataViewComponent implements DoCheck, OnInit, AfterContentInit {
         case 'dateListValue':
           this.dateListValueChildTemplate = item.template
           break
+        case 'tableFilterCell':
+          this.tableFilterCellChildTemplate = item.template
+          break
+        case 'dateTableFilterCell':
+          this.dateTableFilterCellChildTemplate = item.template
+          break
+        case 'relativeDateTableFilterCell':
+          this.relativeDateTableFilterCellChildTemplate = item.template
+          break
+        case 'translationKeyTableFilterCell':
+          this.translationKeyTableFilterCellChildTemplate = item.template
+          break
+        case 'stringTableFilterCell':
+          this.stringTableFilterCellChildTemplate = item.template
+          break
+        case 'numberTableFilterCell':
+          this.numberTableFilterCellChildTemplate = item.template
+          break
+        case 'customTableFilterCell':
+          this.customTableFilterCellChildTemplate = item.template
+          break
       }
     })
   }
diff --git a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.html b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.html
index 515e13c0..bc8d650e 100644
--- a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.html
+++ b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.html
@@ -94,6 +94,13 @@
     [stringListValueTemplate]="_stringListValue ? stringListValue : undefined"
     [dateListValueTemplate]="_dateListValue ? dateListValue : undefined"
     [gridItemTemplate]="_gridItem ? gridItem  : undefined"
+    [tableFilterCellTemplate]="_tableFilterCell ? tableFilterCell : undefined"
+    [dateTableFilterCellTemplate]="_dateTableFilterCell ? dateTableFilterCell : undefined"
+    [customTableFilterCellTemplate]="_customTableFilterCell ? customTableFilterCell : undefined"
+    [numberTableFilterCellTemplate]="_numberTableFilterCell ? numberTableFilterCell : undefined"
+    [stringTableFilterCellTemplate]="_stringTableFilterCell ? stringTableFilterCell : undefined"
+    [relativeDateTableFilterCellTemplate]="_relativeDateTableFilterCell ? relativeDateTableFilterCell : undefined"
+    [translationKeyTableFilterCellTemplate]="_translationKeyTableFilterCell ? translationKeyTableFilterCell : undefined"
     (sorted)="sorting($event)"
     (filtered)="filtering($event)"
     [totalRecordsOnServer]="totalRecordsOnServer"
@@ -246,4 +253,53 @@
     [ngTemplateOutletContext]="{rowObject: rowObject, column:column}"
   >
   </ng-container
-></ng-template>
\ No newline at end of file
+></ng-template>
+
+<ng-template #stringTableFilterCell let-rowObject="rowObject" let-column="column">
+  <ng-container
+    *ngIf="_stringTableFilterCell"
+    [ngTemplateOutlet]="_stringTableFilterCell"
+    [ngTemplateOutletContext]="{rowObject: rowObject, column:column}"
+  >
+  </ng-container
+></ng-template>
+<ng-template #numberTableFilterCell let-rowObject="rowObject" let-column="column">
+  <ng-container
+    *ngIf="_numberTableFilterCell"
+    [ngTemplateOutlet]="_numberTableFilterCell"
+    [ngTemplateOutletContext]="{rowObject: rowObject, column:column}"
+  >
+  </ng-container
+></ng-template>
+<ng-template #customTableFilterCell let-rowObject="rowObject" let-column="column">
+  <ng-container
+    *ngIf="_customTableFilterCell"
+    [ngTemplateOutlet]="_customTableFilterCell"
+    [ngTemplateOutletContext]="{rowObject: rowObject, column:column}"
+  >
+  </ng-container
+></ng-template>
+<ng-template #dateTableFilterCell let-rowObject="rowObject" let-column="column">
+  <ng-container
+    *ngIf="_dateTableFilterCell"
+    [ngTemplateOutlet]="_dateTableFilterCell"
+    [ngTemplateOutletContext]="{rowObject: rowObject, column:column}"
+  >
+  </ng-container
+></ng-template>
+<ng-template #relativeDateTableFilterCell let-rowObject="rowObject" let-column="column">
+  <ng-container
+    *ngIf="_relativeDateTableFilterCell"
+    [ngTemplateOutlet]="_relativeDateTableFilterCell"
+    [ngTemplateOutletContext]="{rowObject: rowObject, column:column}"
+  >
+  </ng-container
+></ng-template>
+<ng-template #translationKeyTableFilterCell let-rowObject="rowObject" let-column="column">
+  <ng-container
+    *ngIf="_translationKeyTableFilterCell"
+    [ngTemplateOutlet]="_translationKeyTableFilterCell"
+    [ngTemplateOutletContext]="{rowObject: rowObject, column:column}"
+  >
+  </ng-container
+></ng-template>
diff --git a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.ts b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.ts
index f111309c..1e775996 100644
--- a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.ts
+++ b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.ts
@@ -127,6 +127,18 @@ export class InteractiveDataViewComponent implements OnInit, AfterContentInit {
   @ContentChild('customListValue') customListValue: TemplateRef<any> | undefined
   @ContentChild('stringListValue') stringListValue: TemplateRef<any> | undefined
   @ContentChild('dateListValue') dateListValue: TemplateRef<any> | undefined
+  @ContentChild('tableFilterCell') tableFilterCell: TemplateRef<any> | undefined
+  @ContentChild('dateTableFilterCell') dateTableFilterCell: TemplateRef<any> | undefined
+  @ContentChild('relativeDateTableFilterCell') relativeDateTableFilterCell: TemplateRef<any> | undefined
+  @ContentChild('translationKeyTableFilterCell') translationKeyTableFilterCell: TemplateRef<any> | undefined
+  @ContentChild('stringTableFilterCell') stringTableFilterCell: TemplateRef<any> | undefined
+  @ContentChild('numberTableFilterCell') numberTableFilterCell: TemplateRef<any> | undefined
+  /**
+   * @deprecated Will be removed and instead to change the template of a specific column filter
+   * use the new approach instead by following the naming convention column id + IdTableFilterCell
+   * e.g. for a column with the id 'status' in DataTable use pTemplate="statusIdTableFilterCell"
+   */
+  @ContentChild('customTableFilterCell') customTableFilterCell: TemplateRef<any> | undefined
 
   templates$: BehaviorSubject<QueryList<PrimeTemplate> | undefined> = new BehaviorSubject<
     QueryList<PrimeTemplate> | undefined
@@ -224,6 +236,27 @@ export class InteractiveDataViewComponent implements OnInit, AfterContentInit {
   get _dateListValue(): TemplateRef<any> | undefined {
     return this.dateListValue
   }
+  get _tableFilterCell(): TemplateRef<any> | undefined {
+    return this.tableFilterCell
+  }
+  get _dateTableFilterCell(): TemplateRef<any> | undefined {
+    return this.dateTableFilterCell
+  }
+  get _relativeDateTableFilterCell(): TemplateRef<any> | undefined {
+    return this.relativeDateTableFilterCell
+  }
+  get _translationKeyTableFilterCell(): TemplateRef<any> | undefined {
+    return this.translationKeyTableFilterCell
+  }
+  get _stringTableFilterCell(): TemplateRef<any> | undefined {
+    return this.stringTableFilterCell
+  }
+  get _numberTableFilterCell(): TemplateRef<any> | undefined {
+    return this.numberTableFilterCell
+  }
+  get _customTableFilterCell(): TemplateRef<any> | undefined {
+    return this.customTableFilterCell
+  }
 
   _data: RowListGridData[] = []
   @Input()
@@ -318,6 +351,27 @@ export class InteractiveDataViewComponent implements OnInit, AfterContentInit {
         case 'dateListValue':
           this.dateListValue = item.template
           break
+        case 'tableFilterCell':
+          this.tableFilterCell = item.template
+          break
+        case 'dateTableFilterCell':
+          this.dateTableFilterCell = item.template
+          break
+        case 'relativeDateTableFilterCell':
+          this.relativeDateTableFilterCell = item.template
+          break
+        case 'translationKeyTableFilterCell':
+          this.translationKeyTableFilterCell = item.template
+          break
+        case 'stringTableFilterCell':
+          this.stringTableFilterCell = item.template
+          break
+        case 'numberTableFilterCell':
+          this.numberTableFilterCell = item.template
+          break
+        case 'customTableFilterCell':
+          this.customTableFilterCell = item.template
+          break
       }
     })
   }