Automatic colspan for tables

2 files changed, 23 insertions, 0 deletions

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'