angular-fixed-header-table
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 ⚡️"

Installation

Install the npm package.

  npm i angular-fixed-header-table

Import module:

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

  @NgModule({
      imports: [
      NgFixedHeaderModule
      .....
      ]
  })

Usage

  • add div with id "fixed Items", prefer it before app-root.
<body>
  <div id="fixedItems"></div>
  <app-root></app-root>
</body>
...
  • 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>
        </tr>
      </thead>
      <tbody id="cutomTableTBodyId">
        <tr *ngFor="let item of dataList">
          <td class="heightAndwidth">{{item.email}}</td>
          <td class="heightAndwidth">{{item.name}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  • 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;
  }
  .heightAndwidth{
      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

Install

npm i angular-fixed-header-table

Weekly Downloads

20

Version

3.0.1

License

none

Unpacked Size

128 kB

Total Files

15

Last publish

Collaborators

  • thebassemnabil