angular-fixed-header-table
Version:
angular-Fixed-Header-table is A simple solution for fixed header in any table.
251 lines (244 loc) • 10.9 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, NgModule } from '@angular/core';
/*
- in constactor, to detect change with RouteReuseStrategy
- then add in subscribe pageUpdated
private router: Router
router.events.subscribe((evt) => {
if (!(evt instanceof NavigationEnd)) {
return;
}
this.pageUpdated = !this.pageUpdated;
});
*/
class BassFixedHeaderDirective {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
this.stopFixed = false;
this.theadPaddingTopBottom = '0.45rem';
this.theadPaddingLeftRight = '1rem';
this.onBodyscroll = (e) => {
this.scroll();
};
}
ngOnInit() {
if (!this.stopFixed) {
setTimeout(() => {
this.inIt();
}, 1000);
}
}
ngOnChanges(changes) {
if (this.z2table && !this.stopFixed) {
setTimeout(() => {
this.changes(changes);
}, 1000);
}
}
ngOnDestroy() {
if (!this.stopFixed) {
this.removeTheadToFixedItems();
window.removeEventListener('scroll', this.onBodyscroll, true);
}
}
inIt() {
this.z2tableinit();
// get event on body/window scroll
window.addEventListener('scroll', this.onBodyscroll, true);
// called 2 times because the wired behavie of table wjen style attr added to Element
this.checkPaddingAndTHSize();
this.checkPaddingAndTHSize();
this.scroll();
}
changes(changes) {
if (changes.pageDestored) {
this.removeTheadToFixedItems();
this.scroll();
}
else {
this.checkPaddingAndTHSize();
this.scroll();
}
}
checkPaddingAndTHSize() {
const scrollFound = this.containerHasHorizontalScrollbar();
if (!scrollFound) {
// no scroll,,, small caoumns
setTimeout(() => {
this.changeThSizes();
}, 500);
this.z2table.style.tableLayout = 'fixed';
}
else {
// tslint:disable-next-line:prefer-for-of
for (let index = 0; index < this.z2tableTHeadTr.children.length; index++) {
const oldTh = this.z2tableTHeadTr.children[index];
oldTh.removeAttribute('style');
}
}
}
containerHasHorizontalScrollbar() {
const hasHorizontalScrollbar = this.el.nativeElement.scrollWidth > this.el.nativeElement.clientWidth;
if (hasHorizontalScrollbar === false) {
return false;
}
else {
return true;
}
}
z2tableinit() {
this.z2table = document.querySelector('#' + this.tableId);
this.z2tableTHead = document.querySelector('#' + this.tableTHeadId);
this.z2tableTHeadTr = document.querySelector('#' + this.tableTHeadTrId);
this.z2tableTBody = document.querySelector('#' + this.tableTBodyId);
if (!this.z2table) {
console.log('loooook table id not found..........');
}
else {
this.z2table.style.tableLayout = 'fixed';
this.z2table.style.width = 'max-content';
}
if (!this.z2tableTHead) {
console.log('loooook table thead id not found..........');
}
if (!this.z2tableTHeadTr) {
console.log('loooook table thead tr not found..........');
}
}
scroll() {
// tthis check because of tabs cache
const table = document.querySelector('#' + this.tableId);
if (this.z2table && table) {
const bounding = this.z2table.getBoundingClientRect();
const tableOffsetTop = this.z2table.offsetTop;
const windowOffset = window.pageYOffset;
const tHeadHeight = this.z2tableTHead.clientHeight;
const pos2 = document.documentElement.scrollTop;
if (this.z2tableTHead) {
// page at end
// console.log('nnn', (window.innerHeight + window.scrollY) >= document.body.offsetHeight);
if ((windowOffset + tHeadHeight) > (tableOffsetTop)) {
if ((window.scrollY) > (tableOffsetTop)) {
this.z2tableTHead.classList.add('z2TblScroll');
this.addTheadToFixedItems();
}
}
else {
this.z2tableTHead.classList.remove('z2TblScroll');
this.removeTheadToFixedItems();
}
}
}
}
changeThSizes() {
if (this.z2tableTBody && this.z2tableTBody.children && this.z2tableTBody.children.length >= 1) {
// tslint:disable-next-line:prefer-for-of
for (let index = 0; index < this.z2tableTHeadTr.children.length; index++) {
const oldTd = this.z2tableTBody.children[0].children[index];
const oldTh = this.z2tableTHeadTr.children[index];
if (!oldTh.hasAttribute('hidden')) {
let orPadding = 0; // beacause border-right
const elStyles = window.getComputedStyle(oldTh);
orPadding = orPadding
+ Number(elStyles.paddingLeft.replace('px', ''))
+ Number(elStyles.paddingRight.replace('px', ''))
+ Number(elStyles.marginLeft.replace('px', ''))
+ Number(elStyles.marginRight.replace('px', ''));
if (oldTd && oldTd.clientWidth) {
const newWeidth = oldTd.clientWidth - orPadding;
if (newWeidth !== 0) {
const styles = 'min-width: ' + newWeidth + 'px !important;';
oldTh.setAttribute('style', styles);
}
}
}
}
}
}
addTheadToFixedItems() {
const fixedItems = document.getElementById('fixedItems');
const fixedItemsStyle = 'height:0px;display: block;';
fixedItems?.setAttribute('style', fixedItemsStyle);
const itemsEl = fixedItems?.querySelector('#' + this.tableId);
if (!itemsEl) {
const containerDiv = this.renderer.createElement('div');
containerDiv.id = this.tableId;
containerDiv.classList.add('z2table-container');
const containerDivStyle = 'width: ' + this.el.nativeElement.clientWidth + 'px';
containerDiv.setAttribute('style', containerDivStyle);
const tableDiv = this.renderer.createElement('div');
const tableDivStyle = 'width: inherit';
tableDiv.setAttribute('style', tableDivStyle);
this.renderer.appendChild(tableDiv, this.z2tableTHead);
this.renderer.appendChild(containerDiv, tableDiv);
this.renderer.appendChild(fixedItems, containerDiv);
this.z2tableTHead.scrollLeft = this.el.nativeElement.scrollLeft;
}
else {
const containerDiv = itemsEl;
containerDiv.style.display = 'block';
this.renderer.appendChild(containerDiv.lastChild, this.z2tableTHead);
this.z2tableTHead.scrollLeft = this.el.nativeElement.scrollLeft;
}
}
removeTheadToFixedItems() {
const fixedItems = document.getElementById('fixedItems');
if (fixedItems && fixedItems.firstChild) {
this.renderer.appendChild(this.z2table, this.z2tableTHead);
// tslint:disable-next-line:prefer-for-of
for (let index = 0; index < fixedItems.children.length; index++) {
const element = fixedItems.children[index];
element.remove();
}
fixedItems.setAttribute('style', 'display: none;overflow:hidden !important');
}
}
}
BassFixedHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BassFixedHeaderDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
BassFixedHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: BassFixedHeaderDirective, selector: "[bassFixedHeader]", inputs: { tableId: "tableId", tableTHeadId: "tableTHeadId", tableTBodyId: "tableTBodyId", tableTHeadTrId: "tableTHeadTrId", pageUpdated: "pageUpdated", pageDestored: "pageDestored", stopFixed: "stopFixed" }, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BassFixedHeaderDirective, decorators: [{
type: Directive,
args: [{
selector: '[bassFixedHeader]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { tableId: [{
type: Input
}], tableTHeadId: [{
type: Input
}], tableTBodyId: [{
type: Input
}], tableTHeadTrId: [{
type: Input
}], pageUpdated: [{
type: Input
}], pageDestored: [{
type: Input
}], stopFixed: [{
type: Input
}] } });
class NgFixedHeaderModule {
}
NgFixedHeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NgFixedHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgFixedHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NgFixedHeaderModule, declarations: [BassFixedHeaderDirective], exports: [BassFixedHeaderDirective] });
NgFixedHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NgFixedHeaderModule, imports: [[]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NgFixedHeaderModule, decorators: [{
type: NgModule,
args: [{
declarations: [
BassFixedHeaderDirective,
],
imports: [],
exports: [
BassFixedHeaderDirective,
]
}]
}] });
/*
* Public API Surface of angular-fixed-header-table
*/
/**
* Generated bundle index. Do not edit.
*/
export { BassFixedHeaderDirective, NgFixedHeaderModule };
//# sourceMappingURL=angular-fixed-header-table.mjs.map