feat(a11y-table): Define a standalone table component

src/app/accessible-table/accessible-table.component.html

@@ -0,0 +1,13 @@
+<cdk-virtual-scroll-viewport [itemSize]="firstRowHeight" class="email-viewport">
+  <table
+    tabindex="0" role="group" aria-label="Messages"
+    class="mat-mdc-table mdc-data-table__table cdk-table mat-sort mat-elevation-z8"
+  >
+    <ng-container *ngTemplateOutlet="theadTemplate"></ng-container>
+
+    <ng-container *cdkVirtualFor="let item of items; trackBy: trackBy; let $index = index;">
+      <ng-container *ngTemplateOutlet="tbodyTemplate; context: {$implicit: item, item: item, index: $index}"></ng-container>
+    </ng-container>
+
+  </table>
+</cdk-virtual-scroll-viewport>

src/app/accessible-table/accessible-table.component.scss

@@ -0,0 +1,16 @@
+table {
+  border-collapse: collapse; /* Removes space between table cells */
+  border-spacing: 0; /* Ensures no extra spacing between cells */
+  max-width: 100%;
+  table-layout: fixed;
+  user-select: none;
+  width: 100%;
+}
+
+cdk-virtual-scroll-viewport {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}

src/app/accessible-table/accessible-table.component.ts

@@ -0,0 +1,110 @@
+// --------- BEGIN RUNBOX LICENSE ---------
+// Copyright (C) 2016-2025 Runbox Solutions AS (runbox.com).
+//
+// This file is part of Runbox 7.
+//
+// Runbox 7 is free software: You can redistribute it and/or modify it
+// under the terms of the GNU General Public License as published by the
+// Free Software Foundation, either version 3 of the License, or (at your
+// option) any later version.
+//
+// Runbox 7 is distributed in the hope that it will be useful, but
+// WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+// General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Runbox 7. If not, see <https://www.gnu.org/licenses/>.
+// ---------- END RUNBOX LICENSE ----------
+
+import {
+  OnDestroy,
+  ChangeDetectionStrategy,
+  AfterViewInit,
+  Component,
+  ContentChild,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { CommonModule } from '@angular/common';
+import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { ListRange } from '@angular/cdk/collections';
+import { Subscription } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-accessible-table',
+  standalone: true, // Make the component standalone
+  imports: [ScrollingModule, CommonModule, MatCheckboxModule],
+  templateUrl: './accessible-table.component.html',
+  styleUrls: ['./accessible-table.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AccessibleTableComponent implements OnDestroy, AfterViewInit, OnChanges {
+  @ContentChild('tbody', { read: TemplateRef }) tbodyTemplate!: TemplateRef<any> | null;
+  @ContentChild('thead', { read: TemplateRef }) theadTemplate!: TemplateRef<any> | null;
+
+  @ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;
+
+  @Output() renderedRangeChange = new EventEmitter<ListRange>();
+  @Input() items: any[] = [];
+
+  @Input() scrollToIndex: null | number = null
+
+  firstRowHeight: number = 100;
+
+  private renderedRangeSub!: Subscription;
+
+  constructor(
+    private elementRef: ElementRef,
+  ) { }
+
+  ngAfterViewInit() {
+    this.renderedRangeSub = this.viewport.renderedRangeStream
+      .pipe(debounceTime(500))
+      .subscribe(range => {
+        this.renderedRangeChange.emit(range)
+      });
+
+      setTimeout(() => {
+        this.updateFirstRowHeight();
+      }, 1000)
+  }
+
+  ngOnDestroy(): void {
+    this.renderedRangeSub?.unsubscribe();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.updateFirstRowHeight()
+
+    if (changes.scrollToIndex && this.items.length > this.scrollToIndex) {
+      this.doScrollToIndex(this.scrollToIndex)
+    }
+  }
+
+  trackBy(index: number) {
+    return index;
+  }
+
+  doScrollToIndex(index: number) {
+    return this.viewport?.scrollToIndex(index, 'smooth');
+  }
+
+  private updateFirstRowHeight(): void {
+    this.firstRowHeight = this
+      .elementRef
+      .nativeElement
+      .parentElement
+        ?.querySelector('tbody')
+        ?.offsetHeight
+        || this.firstRowHeight;
+  }
+}