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:
`ts
import { NgFixedHeaderModule } from 'angular-fixed-header-table';

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




Usage

- add div with id "fixed Items", prefer it before app-root.

`html






...
`

- add the directive selector (bassFixedHeader) on div that have the table, and give it id of your table, thead, thead tr and tbody
ex:
`html



`

- pageUpdated input you can toggle it when u want to re-int the directive.
like the table columns changed.

`ts
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"

`css
#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.