TypeScript icon, indicating that this package has built-in type declarations

3.0.1 • Public • Published

Angular Fixed Header table

angular-Fixed-Header-table is A simple solution for fixed header in any table.

Live Demo "StackBlitz ⚡️"


Install the npm package.

  npm i angular-fixed-header-table

Import module:

  import { NgFixedHeaderModule } from 'angular-fixed-header-table';

      imports: [


  • add div with id "fixed Items", prefer it before app-root.
  <div id="fixedItems"></div>
  • add the directive selector (bassFixedHeader) on div that have the table, and give it id of your table, thead, thead tr and tbody ex:
<div class="overflow-auto p-2 " bassFixedHeader [tableId]="'cutomTableId'"
    [tableTHeadId]="'cutomTableTHeadId'" [tableTHeadTrId]="'cutomTableTHeadTrId'"
    [tableTBodyId]="'cutomTableTBodyId'" [pageUpdated]="pageUpdated" [pageDestored]="pageDestored">
    <table id="cutomTableId" class="table table-striped table-bordered table-hover">
      <thead id="cutomTableTHeadId">
        <tr id="cutomTableTHeadTrId">
          <th scope="col" class="heightAndwidth thStyles">Email</th>
          <th scope="col" class="heightAndwidth thStyles">Name</th>
      <tbody id="cutomTableTBodyId">
        <tr *ngFor="let item of dataList">
          <td class="heightAndwidth">{{}}</td>
          <td class="heightAndwidth">{{}}</td>
  • pageUpdated input you can toggle it when u want to re-int the directive. like the table columns changed.
this.pageUpdated = !this.pageUpdated;

CSS configurations

  • You must include this styles.
  • !important you must style your "th in thead" => in that class "thStyles"
  • !important you must style your "height And width" for th and td => in that class "heightAndwidth"
  #fixedItems {
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    max-height: 100vh;
    overflow: hidden;
  .BassTblScroll {
    position: fixed;
    top: 0;
    left: auto;
    width: inherit;
    z-index: 30;
    overflow: hidden;
    text-align: left!important;
      width: 250px !important;
      max-width: 250px !important;
      min-width: 250px !important;
      height: 50px !important;
  .thStyles {
    background-color: #ffeeba;
    font-weight: bold;
    border: 1px solid #dee2e6;
    padding: 0.75rem;

Directive options ( inputs )

  • tableId : give it your table Id.
  • tableTHeadId : give it your table thead Id.
  • tableTBodyId : give it your table tbody Id.
  • tableTHeadTrId : give it your table thead => tr Id. that will be fixed.
  • pageUpdated : toggle it when tab changed, or u want to resize the header again.
  • pageDestored : toggle it when tab destored.
  • stopFixed : boolean used to stop fixed header.

Package Sidebar


npm i angular-fixed-header-table

Weekly Downloads






Unpacked Size

128 kB

Total Files


Last publish


  • thebassemnabil