app.component.ts

import {AfterViewInit, Component, ViewChild} from '@angular/core';
import {FetchJsonService} from './services/fetch-json.service';
import {FormBuilderService} from './services/form-builder.service';
import FieldType from './class/ui/form/field/field-type';
import FormType from './class/ui/form/form-type';
import 'brace/mode/html';
import 'brace/mode/typescript';
import { setTimeout } from 'timers';

import './windowFixed.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit{

  constructor() {
   
  }

  ngAfterViewInit() {
      window['fixTable']();
  }

}

app.html

<div class="container-fluid">
  <div class="fixed-search">
      <div class="search">
          Row Count:
          <input type="text" [(ngModel)]="count">
          <button type="button" class="btn btn-default btn-circle btn-xl" (click)="showAdvancedSearch()">
              <i class="glyphicon glyphicon-search"></i>
          </button>
      </div>
  </div>
  <div class="container" *ngIf="advancedSearch">
      <div class="row">
          <div class="col-md-12">
              <div class="panel panel-default panel-shadow">
                  <div class="panel-heading">
                      <i class="glyphicon glyphicon-search"></i>
                      Advanced Search
                      <i (click)="closeAdvancedSearch()" class="glyphicon glyphicon-remove icon-arrow-right pull-right"></i>
                  </div>
                  <div class="panel-body">
                      <form #userForm="ngForm" (ngSubmit)="onSearch(userForm.value)" *ngIf="!submitted" novalidate name="myform" autocomplete="on">

                          <div class="form-group">
                              <label for="myName">Process Code</label>
                              <input type="text" name="ProcessCode" list="dataList" class="form-control" type="text" #countryRef="ngModel" ngModel>
                              <datalist id="dataList">
                                  <!-- <option *ngFor="let dat of data | deleteRepeatedProcessCode; let i = index" [value]="data[i].ProcessCode"></option> -->
                              </datalist>

                              <span id="error_name" class="text-danger"></span>
                          </div>




                          <div class="form-group">
                              <label for="pin">Load Id</label>
                              <input id="pin" name="LoadId" class="form-control" type="number" #refPin="ngModel" ngModel>
                              <span id="error_age" class="text-danger"></span>


                          </div>

                          <button id="submit" type="submit" value="submit" class="btn btn-lg btn-default center">Submit</button>

                      </form>

                  </div>
              </div>

          </div>
      </div>
  </div>
</div>
  <div class="container-fluid">






  <div class="row" style="margin-top:75px;">
      <div class="col-xs-12 table table-responsive">
          <table class="table table-responsive table-striped table-bordered table-fixed">
              <thead>
                  <tr>
                      <th>LoadId</th>
                      <th (click)="sortingTableData('ProcessCode')">
                          <span>ProcessCode</span>
                      </th>
                      <th (click)="sortingTableData('LoadTime')">
                          <span>LoadTime</span>
                      </th>
                      <th (click)="sortingTableData('StartTime')">
                          <span>StartTime</span>
                      </th>
                      <th (click)="sortingTableData('EndTime')">
                          <span>EndTime</span>
                      </th>
                      <th (click)="sortingTableData('InsertCount')">
                          <span>InsertCount</span>
                      </th>
                      <th (click)="sortingTableData('UpdateCount')">
                          <span>UpdateCount</span>
                      </th>
                      <th (click)="sortingTableData('DeleteCount')">
                          <span>DeleteCount</span>
                      </th>
                      <th (click)="sortingTableData('ErrorCount')">
                          <span>ErrorCount</span>
                      </th>
                      <th (click)="sortingTableData('TotalCount')">
                          <span>TotalCount</span>
                      </th>

                      <th>SSC</th>

                  </tr>
              </thead>
              <tbody >
                  <tr *ngFor="let dat of data; let i = index">

                      <td >A {{i}}</td>
                      <td >A {{i}}</td>
                      <td >A {{i}}</td>
                      <td >A {{i}}</td>
                      <td >A {{i}}</td>
                      <td  align="right">A {{i}}</td>
                      <td  align="right">A {{i}}</td>
                      <td  align="right">A {{i}} </td>
                      <td  align="right">A {{i}}</td>
                      <td  align="right">A {{i}}</td>
                      <td >a</td>

                  </tr>
              </tbody>
          </table>
          <!-- <img src="https://www.9to5animations.com/wp-content/uploads/2016/03/loading-gif.gif" *ngIf="loading" />   -->

      </div>
  </div>
</div>

style.css

.fixed{
  top:0;
  position:fixed;
  width:auto;
  display:none;
  border:none;
}
.fixed-search{
  position: fixed;
  z-index: 9999;
}

windowFixed.js

;(function($) {
    $.fn.fixMe = function() {
       return this.each(function() {
          var $this = $(this),
             $t_fixed;
          function init() {
             $this.wrap('<div class="container" />');
             $t_fixed = $this.clone();
             $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
             resizeFixed();
          }
          function resizeFixed() {
             $t_fixed.find("th").each(function(index) {
                $(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
             });
          }
          function scrollFixed() {
             var offset = $(this).scrollTop(),
             tableOffsetTop = $this.offset().top,
             tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
             if(offset < tableOffsetTop || offset > tableOffsetBottom)
                $t_fixed.hide();
             else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden"))
                $t_fixed.show();
          }
          $(window).resize(resizeFixed);
          $(window).scroll(scrollFixed);
          init();
       });
    };
 })(jQuery);

 window['fixTable']=function(){
    $("table").fixMe();
 };