I'm currently facing an issue with the sticky header style in my data table. I have created a simple Angular component along with a specific directive:
sticky.directive.ts
@Directive({
selector: '[sticky]'
})
export class StickyDirective {
constructor(private _element: ElementRef, private _window: WindowRef) {
console.log('debug')
}
@HostListener('window:scroll', ['$event'])
handleScrollEvent(e) {
if (this._window.nativeWindow.pageYOffset > 100) {
this._element.nativeElement.classList.add('stick');
} else {
this._element.nativeElement.classList.remove('stick');
}
}
}
The main purpose of this directive is to apply a stick class when the user scrolls below the header. This ensures that the table header remains visible even while scrolling through a long table. The CSS for the stick class is as follows:
.stick {
position: fixed;
top: 55px;
}
In my some.component.html, I utilize the directive on the thead element like so:
<table class=" table table-bordered ">
<thead sticky>
<tr>
<th width="40%">Name
</th>
<th width="10%">Priority
</th>
<th width="25%">Date created
</th>
<th width="25%">Date modified
</th> </tr> </thead> <tbody> <tr *ngFor="let r of entitiesFiltered">
<td>
<div class="table-cell-flex">
<div class="cell-content">
{{r.name}}
</div>
</div>
</td>
<td>
<div class="table-cell-flex">
<div class="cell-content">
{{r.priority}}
</div>
</div>
</td>
...
While the functionality works as expected, with the header staying in place during scroll, there is an issue with the header and columns width changing. Here is how it looks:
https://i.stack.imgur.com/IPYNA.png
Question:
I am seeking advice on how to style my table so that the fixed header does not alter the form/shape of the table. Is this achievable?