diff --git a/src/main/webapp/app/entities/membership/membership.component.html b/src/main/webapp/app/entities/membership/membership.component.html
index d71850b3..d8141a08 100644
--- a/src/main/webapp/app/entities/membership/membership.component.html
+++ b/src/main/webapp/app/entities/membership/membership.component.html
@@ -14,14 +14,32 @@
         <table class="table table-striped">
             <thead>
             <tr jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="reset.bind(this)">
-            <th jhiSortBy="id"><span jhiTranslate="global.field.id">ID</span> <fa-icon [icon]="'sort'"></fa-icon></th>
-            <th jhiSortBy="admissionDocumentDate"><span jhiTranslate="hsadminNgApp.membership.admissionDocumentDate">Admission Document Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
-            <th jhiSortBy="cancellationDocumentDate"><span jhiTranslate="hsadminNgApp.membership.cancellationDocumentDate">Cancellation Document Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
-            <th jhiSortBy="memberFromDate"><span jhiTranslate="hsadminNgApp.membership.memberFromDate">Member From Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
-            <th jhiSortBy="memberUntilDate"><span jhiTranslate="hsadminNgApp.membership.memberUntilDate">Member Until Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
-            <th jhiSortBy="customerPrefix"><span jhiTranslate="hsadminNgApp.membership.customer">Customer</span> <fa-icon [icon]="'sort'"></fa-icon></th>
+                <th jhiSortBy="id"><span jhiTranslate="global.field.id">ID</span> <fa-icon [icon]="'sort'"></fa-icon></th>
+                <th jhiSortBy="admissionDocumentDate"><span jhiTranslate="hsadminNgApp.membership.admissionDocumentDate">Admission Document Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
+                <th jhiSortBy="admissionDocumentDate"><span jhiTranslate="hsadminNgApp.membership.cancellationDocumentDate">Cancellation Document Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
+                <th jhiSortBy="memberFromDate"><span jhiTranslate="hsadminNgApp.membership.memberFromDate">Member From Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
+                <th jhiSortBy="memberUntilDate"><span jhiTranslate="hsadminNgApp.membership.memberUntilDate">Member Until Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
+                <th jhiSortBy="customerDisplayLabel"><span jhiTranslate="hsadminNgApp.membership.customer">Customer</span> <fa-icon [icon]="'sort'"></fa-icon></th>
             <th></th>
             </tr>
+
+            <!-- filter start: -->
+            <tr>
+                <th style="width: 10%"></th>
+                <th style="width: 10%"><input type="text" class="form-control" style="max-width: 20em" minlength="4" maxlength="4" [(ngModel)]="filter.criteria.admissionDocumentDate" (keyup)="filter.trigger($event)"></th>
+                <th style="width: 10%"><input type="text" class="form-control" style="max-width: 20em" minlength="4" maxlength="4" [(ngModel)]="filter.criteria.cancellationDocumentDate" (keyup)="filter.trigger($event)"></th>
+                <th style="width: 10%"><input type="text" class="form-control" style="max-width: 20em" minlength="4" maxlength="4" [(ngModel)]="filter.criteria.memberFromDate" (keyup)="filter.trigger($event)"></th>
+                <th style="width: 10%"><input type="text" class="form-control" style="max-width: 20em" minlength="4" maxlength="4" [(ngModel)]="filter.criteria.memberUntilDate" (keyup)="filter.trigger($event)"></th>
+                <th style="width: 30%">
+                    <select id="field_customer" class="form-control" name="customer" [(ngModel)]="filter.criteria.customerId"  (change)="filter.trigger($event)">
+                        <option [ngValue]="null" selected></option>
+                        <option [ngValue]="customerOption.id" *ngFor="let customerOption of customers; trackBy: trackId">{{customerOption.displayLabel}}</option>
+                    </select>
+                </th>
+                <th style="width: 20%"><button class="btn btn-primary float-left" (click)="filter.reset()">Reset Filter</button></th>
+            </tr>
+            <!-- filter end. -->
+
             </thead>
             <tbody infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0">
             <tr *ngFor="let membership of memberships ;trackBy: trackId">
diff --git a/src/main/webapp/app/entities/membership/membership.component.ts b/src/main/webapp/app/entities/membership/membership.component.ts
index 387df20d..6f015b30 100644
--- a/src/main/webapp/app/entities/membership/membership.component.ts
+++ b/src/main/webapp/app/entities/membership/membership.component.ts
@@ -9,6 +9,9 @@ import { AccountService } from 'app/core';
 
 import { ITEMS_PER_PAGE } from 'app/shared';
 import { MembershipService } from './membership.service';
+import { ICustomer } from 'app/shared/model/customer.model';
+import { CustomerService } from 'app/entities/customer';
+import { TableFilter, queryYearAsDateRange, queryEquals } from 'app/shared/util/tablefilter';
 
 @Component({
     selector: 'jhi-membership',
@@ -24,9 +27,18 @@ export class MembershipComponent implements OnInit, OnDestroy {
     predicate: any;
     reverse: any;
     totalItems: number;
+    customers: ICustomer[];
+    filter: TableFilter<{
+        admissionDocumentDate?: string;
+        cancellationDocumentDate?: string;
+        memberFromDate?: string;
+        memberUntilDate?: string;
+        customerId?: string;
+    }>;
 
     constructor(
         protected membershipService: MembershipService,
+        protected customerService: CustomerService,
         protected jhiAlertService: JhiAlertService,
         protected eventManager: JhiEventManager,
         protected parseLinks: JhiParseLinks,
@@ -40,11 +52,25 @@ export class MembershipComponent implements OnInit, OnDestroy {
         };
         this.predicate = 'id';
         this.reverse = true;
+        this.filter = new TableFilter(
+            {
+                admissionDocumentDate: queryYearAsDateRange,
+                cancellationDocumentDate: queryYearAsDateRange,
+                memberFromDate: queryYearAsDateRange,
+                memberUntilDate: queryYearAsDateRange,
+                customerId: queryEquals
+            },
+            500,
+            () => {
+                this.loadAll();
+            }
+        );
     }
 
     loadAll() {
         this.membershipService
             .query({
+                ...this.filter.buildQueryCriteria(),
                 page: this.page,
                 size: this.itemsPerPage,
                 sort: this.sort()
@@ -72,13 +98,20 @@ export class MembershipComponent implements OnInit, OnDestroy {
             this.currentAccount = account;
         });
         this.registerChangeInMemberships();
+        this.customerService
+            .query()
+            .pipe(
+                filter((mayBeOk: HttpResponse<IMembership[]>) => mayBeOk.ok),
+                map((response: HttpResponse<IMembership[]>) => response.body)
+            )
+            .subscribe((res: IMembership[]) => (this.customers = res), (res: HttpErrorResponse) => this.onError(res.message));
     }
 
     ngOnDestroy() {
         this.eventManager.destroy(this.eventSubscriber);
     }
 
-    trackId(index: number, item: IMembership) {
+    trackId(index: number, item: { id: number }) {
         return item.id;
     }
 
@@ -97,6 +130,8 @@ export class MembershipComponent implements OnInit, OnDestroy {
     protected paginateMemberships(data: IMembership[], headers: HttpHeaders) {
         this.links = this.parseLinks.parse(headers.get('link'));
         this.totalItems = parseInt(headers.get('X-Total-Count'), 10);
+        this.page = 0;
+        this.memberships = [];
         for (let i = 0; i < data.length; i++) {
             this.memberships.push(data[i]);
         }