diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
index 92b17555df0..46bf3000877 100644
--- a/src/app/components/table/table.ts
+++ b/src/app/components/table/table.ts
@@ -5264,6 +5264,18 @@ export class ColumnFilter implements AfterContentInit {
      * @group Props
      */
     @Input() ariaLabel: string | undefined;
+    /**
+     * Callback to invoke on overlay is shown.
+     * @param {AnimationEvent} originalEvent - animation event.
+     * @group Emits
+     */
+    @Output() onShow: EventEmitter<{originalEvent: AnimationEvent}> = new EventEmitter<{originalEvent: AnimationEvent}>();
+    /**
+     * Callback to invoke on overlay is hidden.
+     * @param {AnimationEvent} originalEvent - animation event.
+     * @group Emits
+     */
+    @Output() onHide: EventEmitter<{originalEvent: AnimationEvent}> = new EventEmitter<{originalEvent: AnimationEvent}>();
 
     @ViewChild('icon') icon: Nullable<ElementRef>;
 
@@ -5596,6 +5608,7 @@ export class ColumnFilter implements AfterContentInit {
                 };
 
                 this.overlaySubscription = this.overlayService.clickObservable.subscribe(this.overlayEventListener);
+                this.onShow.emit({originalEvent: event})
                 break;
 
             case 'void':
@@ -5615,6 +5628,7 @@ export class ColumnFilter implements AfterContentInit {
                 break;
             case 'void':
                 ZIndexUtils.clear(event.element);
+                this.onHide.emit({originalEvent: event})
                 break;
         }
     }
diff --git a/src/app/showcase/doc/table/filtermenudoc.ts b/src/app/showcase/doc/table/filtermenudoc.ts
deleted file mode 100644
index a9ea69a6602..00000000000
--- a/src/app/showcase/doc/table/filtermenudoc.ts
+++ /dev/null
@@ -1,653 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
-import { Table } from 'primeng/table';
-import { Code } from '@domain/code';
-import { Customer, Representative } from '@domain/customer';
-import { CustomerService } from '@service/customerservice';
-
-@Component({
-    selector: 'filter-menu-doc',
-    template: ` <app-docsectiontext>
-            <p>Filters are displayed in an overlay.</p>
-        </app-docsectiontext>
-        <p-deferred-demo (load)="loadDemoData()">
-            <div class="card">
-                <p-table
-                    #dt1
-                    [value]="customers"
-                    dataKey="id"
-                    [rows]="10"
-                    [showCurrentPageReport]="true"
-                    [rowsPerPageOptions]="[10, 25, 50]"
-                    [loading]="loading"
-                    [paginator]="true"
-                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
-                    [globalFilterFields]="['name', 'country.name', 'representative.name', 'status']"
-                >
-                    <ng-template pTemplate="caption">
-                        <div class="flex">
-                            <button pButton label="Clear" class="p-button-outlined" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
-                            <span class="p-input-icon-left ml-auto">
-                                <i class="pi pi-search"></i>
-                                <input pInputText type="text" (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" />
-                            </span>
-                        </div>
-                    </ng-template>
-                    <ng-template pTemplate="header">
-                        <tr>
-                            <th style="min-width:15rem">
-                                <div class="flex align-items-center">
-                                    Name
-                                    <p-columnFilter type="text" field="name" display="menu"></p-columnFilter>
-                                </div>
-                            </th>
-                            <th style="min-width:15rem">
-                                <div class="flex align-items-center">
-                                    Country
-                                    <p-columnFilter type="text" field="country.name" display="menu"></p-columnFilter>
-                                </div>
-                            </th>
-                            <th style="min-width:15rem">
-                                <div class="flex align-items-center">
-                                    Agent
-                                    <p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
-                                        <ng-template pTemplate="header">
-                                            <div class="px-3 pt-3 pb-0">
-                                                <span class="font-bold">Agent Picker</span>
-                                            </div>
-                                        </ng-template>
-                                        <ng-template pTemplate="filter" let-value let-filter="filterCallback">
-                                            <p-multiSelect [(ngModel)]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
-                                                <ng-template let-option pTemplate="item">
-                                                    <div class="inline-block vertical-align-middle">
-                                                        <img [alt]="option.label" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ option.image }}" width="24" class="vertical-align-middle" />
-                                                        <span class="ml-1 mt-1">{{ option.name }}</span>
-                                                    </div>
-                                                </ng-template>
-                                            </p-multiSelect>
-                                        </ng-template>
-                                    </p-columnFilter>
-                                </div>
-                            </th>
-                            <th style="min-width:10rem">
-                                <div class="flex align-items-center">
-                                    Date
-                                    <p-columnFilter type="date" field="date" display="menu"></p-columnFilter>
-                                </div>
-                            </th>
-                            <th style="min-width:10rem">
-                                <div class="flex align-items-center">
-                                    Balance
-                                    <p-columnFilter type="numeric" field="balance" display="menu" currency="USD"></p-columnFilter>
-                                </div>
-                            </th>
-                            <th style="min-width:10rem">
-                                <div class="flex align-items-center">
-                                    Status
-                                    <p-columnFilter field="status" matchMode="equals" display="menu">
-                                        <ng-template pTemplate="filter" let-value let-filter="filterCallback">
-                                            <p-dropdown [(ngModel)]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any">
-                                                <ng-template let-option pTemplate="item">
-                                                    <p-tag [value]="option.value" [severity]="getSeverity(option.label)"></p-tag>
-                                                </ng-template>
-                                            </p-dropdown>
-                                        </ng-template>
-                                    </p-columnFilter>
-                                </div>
-                            </th>
-                            <th style="min-width:10rem">
-                                <div class="flex align-items-center">
-                                    Activity
-                                    <p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
-                                        <ng-template pTemplate="filter" let-value let-filter="filterCallback">
-                                            <p-slider [(ngModel)]="value" [range]="true" styleClass="m-3" (onSlideEnd)="filter($event.values)"></p-slider>
-                                            <div class="flex align-items-center px-2">
-                                                <span *ngIf="!value">0</span>
-                                                <span *ngIf="value">{{ value[0] }} - {{ value[1] }}</span>
-                                            </div>
-                                        </ng-template>
-                                    </p-columnFilter>
-                                </div>
-                            </th>
-                            <th style="width: 3rem">
-                                <div class="flex align-items-center">
-                                    Verified
-                                    <p-columnFilter type="boolean" field="verified" display="menu"></p-columnFilter>
-                                </div>
-                            </th>
-                        </tr>
-                    </ng-template>
-                    <ng-template pTemplate="body" let-customer>
-                        <tr>
-                            <td>
-                                {{ customer.name }}
-                            </td>
-                            <td>
-                                <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px" />
-                                <span class="ml-1 vertical-align-middle">{{ customer.country.name }}</span>
-                            </td>
-                            <td>
-                                <img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
-                                <span class="ml-1 vertical-align-middle">{{ customer.representative.name }}</span>
-                            </td>
-                            <td>
-                                {{ customer.date | date : 'MM/dd/yyyy' }}
-                            </td>
-                            <td>
-                                {{ customer.balance | currency : 'USD' : 'symbol' }}
-                            </td>
-                            <td>
-                                <p-tag [value]="customer.status" [severity]="getSeverity(customer.status)"></p-tag>
-                            </td>
-                            <td>
-                                <p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
-                            </td>
-                            <td class="text-center">
-                                <i class="pi" [ngClass]="{ 'text-green-500 pi-check-circle': customer.verified, 'text-red-500 pi-times-circle': !customer.verified }"></i>
-                            </td>
-                        </tr>
-                    </ng-template>
-                    <ng-template pTemplate="emptymessage">
-                        <tr>
-                            <td colspan="7">No customers found.</td>
-                        </tr>
-                    </ng-template>
-                </p-table>
-            </div>
-        </p-deferred-demo>
-        <app-code [code]="code" selector="table-filter-menu-demo" [extFiles]="extFiles"></app-code>`,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class FilterMenuDoc {
-    customers!: Customer[];
-
-    representatives!: Representative[];
-
-    statuses!: any[];
-
-    loading: boolean = true;
-
-    activityValues: number[] = [0, 100];
-
-    constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {}
-
-    loadDemoData() {
-        this.customerService.getCustomersLarge().then((customers) => {
-            this.customers = customers;
-            this.loading = false;
-
-            this.customers.forEach((customer) => (customer.date = new Date(<Date>customer.date)));
-            this.cd.markForCheck();
-        });
-
-        this.representatives = [
-            { name: 'Amy Elsner', image: 'amyelsner.png' },
-            { name: 'Anna Fali', image: 'annafali.png' },
-            { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
-            { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
-            { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
-            { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
-            { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
-            { name: 'Onyama Limba', image: 'onyamalimba.png' },
-            { name: 'Stephen Shaw', image: 'stephenshaw.png' },
-            { name: 'Xuxue Feng', image: 'xuxuefeng.png' }
-        ];
-
-        this.statuses = [
-            { label: 'Unqualified', value: 'unqualified' },
-            { label: 'Qualified', value: 'qualified' },
-            { label: 'New', value: 'new' },
-            { label: 'Negotiation', value: 'negotiation' },
-            { label: 'Renewal', value: 'renewal' },
-            { label: 'Proposal', value: 'proposal' }
-        ];
-    }
-
-    clear(table: Table) {
-        table.clear();
-    }
-
-    getSeverity(status: string) {
-        switch (status) {
-            case 'unqualified':
-                return 'danger';
-
-            case 'qualified':
-                return 'success';
-
-            case 'new':
-                return 'info';
-
-            case 'negotiation':
-                return 'warning';
-
-            case 'renewal':
-                return null;
-        }
-    }
-
-    code: Code = {
-        basic: `<p-table
-    #dt1
-    [value]="customers"
-    dataKey="id"
-    [rows]="10"
-    [showCurrentPageReport]="true"
-    [rowsPerPageOptions]="[10, 25, 50]"
-    [loading]="loading"
-    [paginator]="true"
-    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
-    [globalFilterFields]="['name', 'country.name', 'representative.name', 'status']"
->
-    <ng-template pTemplate="caption">
-        <div class="flex">
-            <button pButton label="Clear" class="p-button-outlined" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
-            <span class="p-input-icon-left ml-auto">
-                <i class="pi pi-search"></i>
-                <input pInputText type="text" (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" />
-            </span>
-        </div>
-    </ng-template>
-    <ng-template pTemplate="header">
-        <tr>
-            <th style="min-width:15rem">
-                <div class="flex align-items-center">
-                    Name
-                    <p-columnFilter type="text" field="name" display="menu"></p-columnFilter>
-                </div>
-            </th>
-            <th style="min-width:15rem">
-                <div class="flex align-items-center">
-                    Country
-                    <p-columnFilter type="text" field="country.name" display="menu"></p-columnFilter>
-                </div>
-            </th>
-            <th style="min-width:15rem">
-                <div class="flex align-items-center">
-                    Agent
-                    <p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
-                        <ng-template pTemplate="header">
-                            <div class="px-3 pt-3 pb-0">
-                                <span class="font-bold">Agent Picker</span>
-                            </div>
-                        </ng-template>
-                        <ng-template pTemplate="filter" let-value let-filter="filterCallback">
-                            <p-multiSelect [(ngModel)]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
-                                <ng-template let-option pTemplate="item">
-                                    <div class="inline-block vertical-align-middle">
-                                        <img [alt]="option.label" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ option.image }}" width="24" class="vertical-align-middle" />
-                                        <span class="ml-1 mt-1">{{ option.name }}</span>
-                                    </div>
-                                </ng-template>
-                            </p-multiSelect>
-                        </ng-template>
-                    </p-columnFilter>
-                </div>
-            </th>
-            <th style="min-width:10rem">
-                <div class="flex align-items-center">
-                    Date
-                    <p-columnFilter type="date" field="date" display="menu"></p-columnFilter>
-                </div>
-            </th>
-            <th style="min-width:10rem">
-                <div class="flex align-items-center">
-                    Balance
-                    <p-columnFilter type="numeric" field="balance" display="menu" currency="USD"></p-columnFilter>
-                </div>
-            </th>
-            <th style="min-width:10rem">
-                <div class="flex align-items-center">
-                    Status
-                    <p-columnFilter field="status" matchMode="equals" display="menu">
-                        <ng-template pTemplate="filter" let-value let-filter="filterCallback">
-                            <p-dropdown [(ngModel)]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any">
-                                <ng-template let-option pTemplate="item">
-                                    <p-tag [value]="option.value" [severity]="getSeverity(option.label)"></p-tag>
-                                </ng-template>
-                            </p-dropdown>
-                        </ng-template>
-                    </p-columnFilter>
-                </div>
-            </th>
-            <th style="min-width:10rem">
-                <div class="flex align-items-center">
-                    Activity
-                    <p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
-                        <ng-template pTemplate="filter" let-filter="filterCallback">
-                            <p-slider [(ngModel)]="activityValues" [range]="true" (onSlideEnd)="filter($event.values)" styleClass="m-3"></p-slider>
-                            <div class="flex align-items-center px-2">
-                                <span>{{ activityValues[0] }}</span>
-                                <span>{{ activityValues[1] }}</span>
-                            </div>
-                        </ng-template>
-                    </p-columnFilter>
-                </div>
-            </th>
-            <th style="width: 3rem">
-                <div class="flex align-items-center">
-                    Verified
-                    <p-columnFilter type="boolean" field="verified" display="menu"></p-columnFilter>
-                </div>
-            </th>
-        </tr>
-    </ng-template>
-    <ng-template pTemplate="body" let-customer>
-        <tr>
-            <td>
-                {{ customer.name }}
-            </td>
-            <td>
-                <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px" />
-                <span class="ml-1 vertical-align-middle">{{ customer.country.name }}</span>
-            </td>
-            <td>
-                <img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
-                <span class="ml-1 vertical-align-middle">{{ customer.representative.name }}</span>
-            </td>
-            <td>
-                {{ customer.date | date: 'MM/dd/yyyy' }}
-            </td>
-            <td>
-                {{ customer.balance | currency: 'USD':'symbol' }}
-            </td>
-            <td>
-                <p-tag [value]="customer.status" [severity]="getSeverity(customer.status)"></p-tag>
-            </td>
-            <td>
-                <p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
-            </td>
-            <td class="text-center">
-                <i class="pi" [ngClass]="{ 'text-green-500 pi-check-circle': customer.verified, 'text-red-500 pi-times-circle': !customer.verified }"></i>
-            </td>
-        </tr>
-    </ng-template>
-    <ng-template pTemplate="emptymessage">
-        <tr>
-            <td colspan="7">No customers found.</td>
-        </tr>
-    </ng-template>
-</p-table>`,
-        html: `
-<div class="card">
-    <p-table
-        #dt1
-        [value]="customers"
-        dataKey="id"
-        [rows]="10"
-        [showCurrentPageReport]="true"
-        [rowsPerPageOptions]="[10, 25, 50]"
-        [loading]="loading"
-        [paginator]="true"
-        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
-        [globalFilterFields]="['name', 'country.name', 'representative.name', 'status']"
-        >
-        <ng-template pTemplate="caption">
-            <div class="flex">
-                <button pButton label="Clear" class="p-button-outlined" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
-                <span class="p-input-icon-left ml-auto">
-                    <i class="pi pi-search"></i>
-                    <input pInputText type="text" (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" />
-                </span>
-            </div>
-        </ng-template>
-        <ng-template pTemplate="header">
-            <tr>
-                <th style="min-width:15rem">
-                    <div class="flex align-items-center">
-                        Name
-                        <p-columnFilter type="text" field="name" display="menu"></p-columnFilter>
-                    </div>
-                </th>
-                <th style="min-width:15rem">
-                    <div class="flex align-items-center">
-                        Country
-                        <p-columnFilter type="text" field="country.name" display="menu"></p-columnFilter>
-                    </div>
-                </th>
-                <th style="min-width:15rem">
-                    <div class="flex align-items-center">
-                        Agent
-                        <p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
-                            <ng-template pTemplate="header">
-                                <div class="px-3 pt-3 pb-0">
-                                    <span class="font-bold">Agent Picker</span>
-                                </div>
-                            </ng-template>
-                            <ng-template pTemplate="filter" let-value let-filter="filterCallback">
-                                <p-multiSelect [(ngModel)]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
-                                    <ng-template let-option pTemplate="item">
-                                        <div class="inline-block vertical-align-middle">
-                                            <img [alt]="option.label" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ option.image }}" width="24" class="vertical-align-middle" />
-                                            <span class="ml-1 mt-1">{{ option.name }}</span>
-                                        </div>
-                                    </ng-template>
-                                </p-multiSelect>
-                            </ng-template>
-                        </p-columnFilter>
-                    </div>
-                </th>
-                <th style="min-width:10rem">
-                    <div class="flex align-items-center">
-                        Date
-                        <p-columnFilter type="date" field="date" display="menu"></p-columnFilter>
-                    </div>
-                </th>
-                <th style="min-width:10rem">
-                    <div class="flex align-items-center">
-                        Balance
-                        <p-columnFilter type="numeric" field="balance" display="menu" currency="USD"></p-columnFilter>
-                    </div>
-                </th>
-                <th style="min-width:10rem">
-                    <div class="flex align-items-center">
-                        Status
-                        <p-columnFilter field="status" matchMode="equals" display="menu">
-                            <ng-template pTemplate="filter" let-value let-filter="filterCallback">
-                                <p-dropdown [(ngModel)]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any">
-                                    <ng-template let-option pTemplate="item">
-                                        <p-tag [value]="option.value" [severity]="getSeverity(option.label)"></p-tag>
-                                    </ng-template>
-                                </p-dropdown>
-                            </ng-template>
-                        </p-columnFilter>
-                    </div>
-                </th>
-                <th style="min-width:10rem">
-                    <div class="flex align-items-center">
-                        Activity
-                        <p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
-                            <ng-template pTemplate="filter" let-filter="filterCallback">
-                                <p-slider [(ngModel)]="activityValues" [range]="true" (onSlideEnd)="filter($event.values)" styleClass="m-3"></p-slider>
-                                <div class="flex align-items-center px-2">
-                                    <span>{{ activityValues[0] }}</span>
-                                    <span>{{ activityValues[1] }}</span>
-                                </div>
-                            </ng-template>
-                        </p-columnFilter>
-                    </div>
-                </th>
-                <th style="width: 3rem">
-                    <div class="flex align-items-center">
-                        Verified
-                        <p-columnFilter type="boolean" field="verified" display="menu"></p-columnFilter>
-                    </div>
-                </th>
-            </tr>
-        </ng-template>
-        <ng-template pTemplate="body" let-customer>
-            <tr>
-                <td>
-                    {{ customer.name }}
-                </td>
-                <td>
-                    <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px" />
-                    <span class="ml-1 vertical-align-middle">{{ customer.country.name }}</span>
-                </td>
-                <td>
-                    <img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
-                    <span class="ml-1 vertical-align-middle">{{ customer.representative.name }}</span>
-                </td>
-                <td>
-                    {{ customer.date | date: 'MM/dd/yyyy' }}
-                </td>
-                <td>
-                    {{ customer.balance | currency: 'USD':'symbol' }}
-                </td>
-                <td>
-                    <p-tag [value]="customer.status" [severity]="getSeverity(customer.status)"></p-tag>
-                </td>
-                <td>
-                    <p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
-                </td>
-                <td class="text-center">
-                    <i class="pi" [ngClass]="{ 'text-green-500 pi-check-circle': customer.verified, 'text-red-500 pi-times-circle': !customer.verified }"></i>
-                </td>
-            </tr>
-        </ng-template>
-        <ng-template pTemplate="emptymessage">
-            <tr>
-                <td colspan="7">No customers found.</td>
-            </tr>
-        </ng-template>
-    </p-table>
-</div>`,
-        typescript: `
-import { Component, OnInit } from '@angular/core';
-import { Table } from 'primeng/table';
-import { Customer, Representative } from '@domain/customer';
-import { CustomerService } from '@service/customerservice';
-
-@Component({
-    selector: 'table-filter-menu-demo',
-    templateUrl: 'table-filter-menu-demo.html',
-    styleUrls: ['table-filter-menu-demo.scss']
-})
-export class TableFilterMenuDemo implements OnInit {
-    customers!: Customer[];
-
-    representatives!: Representative[];
-
-    statuses!: any[];
-
-    loading: boolean = true;
-
-    activityValues: number[] = [0, 100];
-
-    constructor(private customerService: CustomerService) {}
-
-    ngOnInit() {
-        this.customerService.getCustomersLarge().then((customers) => {
-            this.customers = customers;
-            this.loading = false;
-
-            this.customers.forEach((customer) => (customer.date = new Date(<Date>customer.date)));
-        });
-
-        this.representatives = [
-            { name: 'Amy Elsner', image: 'amyelsner.png' },
-            { name: 'Anna Fali', image: 'annafali.png' },
-            { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
-            { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
-            { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
-            { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
-            { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
-            { name: 'Onyama Limba', image: 'onyamalimba.png' },
-            { name: 'Stephen Shaw', image: 'stephenshaw.png' },
-            { name: 'Xuxue Feng', image: 'xuxuefeng.png' }
-        ];
-
-        this.statuses = [
-            { label: 'Unqualified', value: 'unqualified' },
-            { label: 'Qualified', value: 'qualified' },
-            { label: 'New', value: 'new' },
-            { label: 'Negotiation', value: 'negotiation' },
-            { label: 'Renewal', value: 'renewal' },
-            { label: 'Proposal', value: 'proposal' }
-        ];
-    }
-
-    clear(table: Table) {
-        table.clear();
-    }
-
-    getSeverity(status: string) {
-        switch (status.toLowerCase()) {
-            case 'unqualified':
-                return 'danger';
-
-            case 'qualified':
-                return 'success';
-
-            case 'new':
-                return 'info';
-
-            case 'negotiation':
-                return 'warning';
-
-            case 'renewal':
-                return null;
-        }
-    }
-}`,
-        scss: `
-:host ::ng-deep {
-    .p-progressbar {
-        height: .5rem;
-        background-color: #D8DADC;
-    
-        .p-progressbar-value {
-            background-color: #607D8B;
-        }
-    }
-}`,
-        data: `{
-    id: 1000,
-    name: 'James Butt',
-    country: {
-        name: 'Algeria',
-        code: 'dz'
-    },
-    company: 'Benton, John B Jr',
-    date: '2015-09-13',
-    status: 'unqualified',
-    verified: true,
-    activity: 17,
-    representative: {
-        name: 'Ioni Bowcher',
-        image: 'ionibowcher.png'
-    },
-    balance: 70663
-},
-...`,
-        service: ['CustomerService']
-    };
-
-    extFiles = [
-        {
-            path: 'src/domain/customer.ts',
-            content: `
-export interface Country {
-    name?: string;
-    code?: string;
-}
-
-export interface Representative {
-    name?: string;
-    image?: string;
-}
-
-export interface Customer {
-    id?: number;
-    name?: string;
-    country?: Country;
-    company?: string;
-    date?: string | Date;
-    status?: string;
-    activity?: number;
-    representative?: Representative;
-    verified?: boolean;
-    balance?: number;
-}`
-        }
-    ];
-}
diff --git a/src/app/showcase/doc/table/tabledoc.module.ts b/src/app/showcase/doc/table/tabledoc.module.ts
index 63dba95dfa7..f0213ffbc25 100644
--- a/src/app/showcase/doc/table/tabledoc.module.ts
+++ b/src/app/showcase/doc/table/tabledoc.module.ts
@@ -45,7 +45,6 @@ import { CustomSortDoc } from './customsortdoc';
 import { DynamicDoc } from './dynamicdoc';
 import { ExpandableRowGroupDoc } from './expandablerowgroupdoc';
 import { ExportDoc } from './exportdoc';
-import { FilterMenuDoc } from './filtermenudoc';
 import { FilterBasicDoc } from './filterbasic';
 import { FlexibleScrollDoc } from './flexiblescrolldoc';
 import { FrozenColumnsDoc } from './frozencolumnsdoc';
@@ -143,7 +142,6 @@ import { FilterAdvancedDoc } from './filteradvanceddoc';
         DynamicDoc,
         ExpandableRowGroupDoc,
         ExportDoc,
-        FilterMenuDoc,
         FilterBasicDoc,
         FilterAdvancedDoc,
         FlexibleScrollDoc,