Angular 2/4/5/6/7-Custom Table component with Sort,Filter,Pagination with data from a complex JSON Array-Complete Guide(code snippet)

Table GUI

//step 1 install ngb bootstrap npm package npm install --save @ng-bootstrap/ng-bootstrap

main.module.ts

import { NgbPaginationModule} 
from '@ng-bootstrap/ng-bootstrap/';
@NgModule({
declarations:[],
imports: [
NgbPaginationModule.forRoot()
]
})
sample.component.html
<div class="row" style="padding-top:3px;">
 <div class="col-sm-5">
   <label class="control-label">
     Records per page
      <label>
       <input [(ngModel)]="itemsPerPage" 
    style="width:50px" class="form-control" type="text">
      </label>
     </label>
    <label class="control-label">
      Total records:
      <label class="info-text">
      {{TotalCount}}
      </label>
   </label>
   </div>
   <div *ngIf="count > itemsPerPage" class="col-sm-7 ">
     <div class=" pull-right">
        <ngb-pagination [collectionSize]="count"
  [pageSize]="itemsPerPage" [(page)]="page"
  [boundaryLinks]="true"></ngb-pagination>
      </div>
      </div>
 </div>
 <table class="table table-striped 
table-filter table-condensed smaller-font">
  <th>
    <td  (click)="sort('name')">
    Name
 <span *ngIf="sorkKey=='name' && isAsc"
 class="glyphicon glyphicon-chevron-up">
    </span>
    <span *ngIf="sorkKey=='name' && !isAsc" 
 class="glyphicon glyphicon-chevron-down">
     </span>
    </td>
   <td  (click)="sort('age')">
 Age
 <span *ngIf="sorkKey=='age' && isAsc"
 class="glyphicon glyphicon-chevron-up">
    </span>
    <span *ngIf="sorkKey=='age' && !isAsc" 
 class="glyphicon glyphicon-chevron-down">
     </span>
    </td>
   <td  (click)="sort('sex')">
     Sex
  <span *ngIf="sorkKey=='sex' && isAsc"
 class="glyphicon glyphicon-chevron-up">
    </span>
    <span *ngIf="sorkKey=='sex' && !isAsc" 
 class="glyphicon glyphicon-chevron-down">
     </span>
    </td>
   <td  (click)="sort('married')">
 Marrital Status
 <span *ngIf="sorkKey=='married' && isAsc"
 class="glyphicon glyphicon-chevron-up">
    </span>
    <span *ngIf="sorkKey=='married' && !isAsc" 
 class="glyphicon glyphicon-chevron-down">
     </span>
   </td>
  </th>
  <tr>
   <td>
 <div class="inner-addon right-addon">
  <i class="glyphicon glyphicon-search"></i>  
   <input type='text'   
 [(ngModel)]="filterKeys.name" 
 (change)="filter()">
 </div>
</td>
  <td>
 <div class="inner-addon right-addon">
  <i class="glyphicon glyphicon-search"></i>  
   <input type='text'   
 [(ngModel)]="filterKeys.age" 
 (change)="filter()">
 </div>
</td>
  <td>
 <div class="inner-addon right-addon">
  <i class="glyphicon glyphicon-search"></i>  
   <input type='text'   
 [(ngModel)]="filterKeys.sex" 
 (change)="filter()">
 </div>
</td>
   <td>
 <div class="inner-addon right-addon">
  <i class="glyphicon glyphicon-search"></i>  
   <input type='text'   
 [(ngModel)]="filterKeys.married" 
 (change)="filter()">
 </div>
</td>
 </tr>
<tr *ngFor="let item of visibleList 
 | slice:(page-1)*itemsPerPage:page*itemsPerPage">
  <td>{{item.name}}</td>
  <td>{{item.age}}</td>
   <td>{{item.sex}}</td>
 <td>{{item.married}}</td>
 <td align="right">
    <a (click)="edit(item)" 
 class="cursor" title="Click to Edit">
     <span class="glyphicon glyphicon-edit"></span>
     </a>
    <a (click)="confirmation(item.name);"
 class="cursor" title="Click to Delete">
       <span class="glyphicon glyphicon-trash"></span>
     </a>
   </td>
</tr> 
</table>
sample.component.ts
import { SearchFilterPipe } 
from '../../../shared/search-filter.pipe';
import { SortFilterPipe } 
from '../../../shared/sort-filter.pipe';
@Component({
    templateUrl: './sample.component.html'
})
export class component implements OnInit{
filterKeys: any;
visibleList;
sorkKey:string;
isAsc:boolean;
TotalCount:number;
page: number = 1;
count: number = 0;
itemsPerPage: number = 15;
 data = 
[{ name: 'Name1', age: 20, 
   sex: 'M', married: false}
 { name: 'Name2', age: 30,
    sex: 'F', married: true},
 { name: 'Name3', age: 22, 
   sex: 'F', married: false},
 { name: 'Name4', age: 25, 
   sex: 'M', married: true}  ,
]
constructor(private searchFilter:
            SearchFilterPipe,
private sortFilter:SortFilterPipe) {

            }
ngOnInit(){
 this.sorkKey="name";
  this.filterKeys = 
 { name: '', age: 0, sex: '', married: null };
}  
filter() {
 this.visibleList= this.searchFilter.
                 transform
               (this.data, this.filterKeys);
   this.count = this.visibleList.length;
       }
sort(key:string){
        this.isAsc = !this.isAsc
        this.sorkKey=key;
        this.visibleList =
 this.sortFilter.transform(this.visibleList,
this.sorkKey,this.isAsc);
    }
}
Search-Filter.pipe.ts
import { Pipe, PipeTransform } 
from '@angular/core';
@Pipe({ name: 'searchFilter' })

export class SearchFilterPipe implements 
PipeTransform {
transform(items: Array,
filter: { [key: string]: any }): Array {
if (items) {
return items.filter(item => {
let match: boolean = true;
for (var k in filter) {
if (filter[k] && filter[k] != '') {
 if (typeof (item[k]) == "boolean") {
  let val: boolean = (filter[k] == "true");
   if (item[k] != val)
    {
    match = false;
    }
   }                       
   else {
     if (item[k] && item[k] !="" && 
     item[k].toString().toLowerCase().indexOf
     (filter[k].toString().
      toLowerCase()) == -1)
      match = false;
        }                    
       }
     }
 return match;
    });
   }
 }
Sort-Filter.pipe.ts
import { Pipe, PipeTransform } 
from '@angular/core';
@Pipe({ name: 'sortFilter' })

export class SortFilterPipe
 implements PipeTransform {
    key: string;
  
    transform(items: Array, 
   key: string, asc: boolean)
 {
  this.key = key;
 if (items)
  {
  if (asc)
   {
   return items.sort((item1: any, 
                    item2: any) => 
    {               
    if (!item2[this.key])
     return -1
    else if (!item1[this.key])
     return 1
    else if (item1[this.key] > 
            item2[this.key])
     return 1
    else if (item1[this.key] ===
           item2[this.key])
     return 0
    else
     return -1
   })
  }
  else
 {
  return items.sort((item1: any,
    item2: any) => 
 {                 
 if (!item2[this.key])
   return 1
 else if (!item1[this.key])
   return -1
 else if (item1[this.key] < 
          item2[this.key])
   return 1
 else if (item1[this.key] ===
         item2[this.key])
  return 0
 else
   return -1
  })
 }
}}}