From 4b70c278a960a8d43407f0039aa03d0b08b44f9c Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 26 May 2023 10:27:02 +0200 Subject: Automatic colspan for tables --- .../shared-main/angular/auto-colspan.directive.ts | 22 ++++++++++++++++++++++ client/src/app/shared/shared-main/angular/index.ts | 1 + 2 files changed, 23 insertions(+) create mode 100644 client/src/app/shared/shared-main/angular/auto-colspan.directive.ts (limited to 'client/src/app/shared/shared-main/angular') diff --git a/client/src/app/shared/shared-main/angular/auto-colspan.directive.ts b/client/src/app/shared/shared-main/angular/auto-colspan.directive.ts new file mode 100644 index 000000000..8da89b668 --- /dev/null +++ b/client/src/app/shared/shared-main/angular/auto-colspan.directive.ts @@ -0,0 +1,22 @@ +import { AfterViewInit, Directive, ElementRef, Renderer2 } from '@angular/core' + +@Directive({ + selector: '[myAutoColspan]' +}) +export class AutoColspanDirective implements AfterViewInit { + + constructor ( + private host: ElementRef, + private renderer: Renderer2 + ) { } + + ngAfterViewInit () { + const el = this.host.nativeElement as HTMLElement + const table = el.closest('table') + if (!table) throw new Error('table element not found') + + const th = table.querySelectorAll('th') + + this.renderer.setAttribute(el, 'colspan', th.length + '') + } +} diff --git a/client/src/app/shared/shared-main/angular/index.ts b/client/src/app/shared/shared-main/angular/index.ts index f72d60313..6ea494129 100644 --- a/client/src/app/shared/shared-main/angular/index.ts +++ b/client/src/app/shared/shared-main/angular/index.ts @@ -1,3 +1,4 @@ +export * from './auto-colspan.directive' export * from './autofocus.directive' export * from './bytes.pipe' export * from './defer-loading.directive' -- cgit v1.2.3